反应导出意外的令牌

Question

所以我有这些文件和文件夹.

App.js
modules/
  user/
    index.js
    list.js

在list.js我有 export default (props) => (...)

在index.js我有 export UserList from './list';

在App.js我有 import { UserList } from './modules/user';

那里有什么不对吗？因为我得到了

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

但我不明白这里有什么问题？救命!

编辑:这里是我的list.js文件的更多细节,但我不认为它有所不同,因为错误在index.js中

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

Answer 1

我看到你直接导出属于另一个文件的组件而不导入它.

您的方式是ES8提案

在ES6中,您可以将组件导出为

 export {default as UserList} from './list'

然后导入为

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

Answer 2

对于Babel 6用户

将babel-plugin-transform-export-extensions插件添加到您的.babelrc中，如下所示：

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

然后运行以下命令安装插件

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

此后，将通过以下方式从index.js导出模块：

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

对于使用早期babel版本的用户，只需使用commonjs模块。