[英]Problem with npm build and babel in React Create App
I'm setting up a new React app, which I haven't done in some time, and running into what I think is a simple problem.我正在设置一个新的 React 应用程序,我已经有一段时间没有做过了,并且遇到了我认为是一个简单的问题。 When I run
npm run build
I get this error:当我运行
npm run build
时,我收到此错误:
SyntaxError: /Users/.../Projects/MyProject/frontend/src/App.js: Support for the experimental syntax 'jsx' isn't currently enabled (8:5):
6 | function App() {
7 | return (
> 8 | <div className='App'>
| ^
9 | <header className='app-header'>
10 | <h1>Welcome!</h1>
I'm using Javascript and Flow.我正在使用 Javascript 和 Flow。 I followed the instructions to get Flow working, which involved installing Babel.
我按照说明让 Flow 工作,其中包括安装 Babel。 I sense this is where the problem lies.
我觉得这就是问题所在。
Here's my package.json
file:这是我的
package.json
文件:
{
"name": "frontend",
"main": "lib/index.js",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
"flow-bin": "^0.130.0",
"node-sass": "^4.14.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "babel src/ -d lib/",
"prepublish": "npm run build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"flow": "flow"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/cli": "^7.10.5",
"@babel/core": "^7.10.5",
"@babel/preset-flow": "^7.10.4"
}
}
Might anyone know what the problem is?可能有人知道问题是什么吗?
I tried the following and it "seemed" to work:我尝试了以下,它“似乎”工作:
In the root of my React project, I re-added a file called .babelrc
.在我的 React 项目的根目录中,我重新添加了一个名为
.babelrc
的文件。 This alone was strange because I had read that this file isn't supported in Babel 6 & above.仅此一项就很奇怪,因为我读过 Babel 6 及更高版本不支持此文件。 The contents of this file are:
这个文件的内容是:
{
"presets": [
["@babel/preset-env"],
["@babel/preset-flow"],
["@babel/preset-react"]
]
}
Now npm run build
doesn't have any errors.现在
npm run build
没有任何错误。 Some files are created in my /lib
directory but I still need to test whether they work correctly.在我的
/lib
目录中创建了一些文件,但我仍然需要测试它们是否正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.