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>
);

Can you share your index.js or list.js? There is a clearly syntax error. — Ozgur, Jul 16 '17 at 10:13
@OzgurGUL: "export UserList from './list';" is literally the whole content of my /modules/user/index.js — Anh Pham, Jul 16 '17 at 10:21
First you must import it AFAIK: `import UserList from './list; export default UserList` — Ozgur, Jul 16 '17 at 10:23

score 20 · Accepted Answer · answered Jul 16 '17 at 10:27

20

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';

answered Jul 16 '17 at 10:27

Shubham Khatri

270,417
55
406
400

Verified locally, nice one. – T.J. Crowder Jul 16 '17 at 10:28
That works! Interesting. I got the idea of my above code from here: https://github.com/marmelab/admin-on-rest/blob/master/src/rest/index.js It works there but not for me. – Anh Pham Jul 16 '17 at 10:31
Not sure how it works if at all it works for the OP in the Github repository. Clearly that is a ES8 syntax which I am not sure is available yet to use – Shubham Khatri Jul 16 '17 at 10:37
1

They're using babel with `stage-0`, perhaps that's it. – T.J. Crowder Jul 16 '17 at 10:46
In case you have multiple imports in the file and you want to export all in one object, use export {UserList, otherComponent}? With this, you don't have to use the default. – Tarun Feb 06 '20 at 14:07

Shahbaz Shueb · Answer 2 · 2017-11-07T13:59:19.637

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.

score 0 · Answer 3 · answered Dec 29 '22 at 14:32

I added <script type="module" src="/Aapp.js"></script> in inside of body section of public/index.html. It worked for me. Please refer this blog.

I used node version 18.12.1 and react version 17.0.2

<!DOCTYPE html>  
<html lang="en">  
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>

    <!-- ✅ set this script’s type to `module` -->
    <script type="module" src="/Aapp.js"></script>
  </body>
</html>

react export Unexpected token

3 Answers3

Linked