react export Unexpected token

Question

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 './list';

And in App.js I have import { UserList } from './modules/user';

Is there something wrong there? Because I got

./src/modules/user/index.js
Syntax error: Unexpected token, expected { (1:7)
> 1 | export UserList from './list';

But I don't see what's wrong here? Help!

Edit: Here's more details of my list.js file, but I don't think it makes a difference because the error is in index.js

import React from 'react';
// more import
export default (props) => (
  <List {...props}>
    ...
  </List>
);

Answer 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 {default as UserList} from './list'

and then import as

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

Answer 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.