logo标签列表

React导出文件出现Unexpected token错误

javascriptreactjs
8

我有这些文件和文件夹。

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>
);
2
你能分享一下你的index.js或list.js吗？有一个明显的语法错误。 - Ozgur
@OzgurGUL: "export UserList from './list';" 就是我 /modules/user/index.js 文件的全部内容。 - Anh Pham
首先，据我所知，您必须导入它：import UserList from './list; export default UserList。 - Ozgur
@T.J.Crowder，啊，好的，知道了，谢谢。 - Ozgur
3个回答
20
我看到你正在直接导出另一个文件中的组件，而没有进行导入。
你现在所做的是ES8提案的一种方式。
在ES6中，你可以这样导出组件：
 export {default as UserList} from './list'

然后导入

import { UserList } from './modules/user';
本地验证通过，不错。 - T.J. Crowder
可以了！有趣。我从这里得到了上面代码的想法：https://github.com/marmelab/admin-on-rest/blob/master/src/rest/index.js它在那里有效，但对我无效。 - Anh Pham
不确定它是否适用于Github存储库中的原始发起人。显然，这是一种ES8语法，我不确定是否已经可以使用。 - Shubham Khatri
1
他们正在使用带有stage-0的Babel，也许这就是原因。 - T.J. Crowder
如果您在文件中有多个导入，并且希望将所有内容导出到一个对象中，请使用export {UserList，otherComponent}。这样，您就不必使用默认值。 - Tarun
5

对于Babel 6用户

像这样在您的.babelrc中添加babel-plugin-transform-export-extensions插件：

  "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模块即可。
0
我在public/index.html的部分中添加了<script type="module" src="/Aapp.js"></script>。这对我有用。请参阅博客。
我使用的是node版本18.12.1和react版本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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接