[英]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>
);
我看到你直接導出屬於另一個文件的組件而不導入它。
您的方式是ES8提案
在ES6中,您可以將組件導出為
export {default as UserList} from './list'
然后導入為
import { UserList } from './modules/user';
對於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模塊即可。
我在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.