React Export Unexpected Token

So I have these file and folder. App.js modules/ user/ index.js list.js In list.js I have export default (props) => (...) In index.js I have export UserList from './l

Solution 1:

I see you are exporting the component directly which belongs to another file without importing it.

The way you are doing it is a ES8 Proposal

In ES6, you could export the component as

export {defaultasUserList} from'./list'

and then import as

import { UserList } from'./modules/user';

Solution 2:

For Babel 6 users

add babel-plugin-transform-export-extensions plugin to your .babelrc like this:

"plugins":["babel-plugin-transform-export-extensions","transform-es2015-modules-commonjs"]

and then run to the following install the plugins

npm install --save-dev babel-plugin-transform-export-extensions
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

After this, export of modules will work in the following way from index.js:

export simpleRestClient from'./simple';
export jsonServerRestClient from'./jsonServer';
export * from'./types';

For those using earlier babel versions, simply use the commonjs module.