反应导出意外令牌
[英]react export Unexpected token
问题描述
所以我有这些文件和文件夹。
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>
);
3 个解决方案
解决方案1
20 已采纳 2017-07-16 10:27:05
我看到你直接导出属于另一个文件的组件而不导入它。
您的方式是ES8提案
在ES6中，您可以将组件导出为
export {default as UserList} from './list'
然后导入为
import { UserList } from './modules/user';
解决方案2
5 2017-11-07 12:40:27
对于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模块即可。
解决方案3
0 2022-12-29 14:32:02
我在public/index.html的body部分内部添加了<script type="module" src="/Aapp.js"></script> 。 它对我有用。 请参考此博客。
我使用节点版本18.12.1和反应版本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和Webpack中导出意外的令牌
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.