[英]React - Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation
I want to use react-validation component Input
in my form.我想在我的表单中使用反应验证组件
Input
。 This is why I imported it & used inside the form as:这就是为什么我将它导入并在表单中使用为:
<Input className="form-control"
type="text"
placeholder="name"
value={props.data.creatingUser.createName}
name="createName"
id="createName"
onChange={props.handleAddChange}
required/>
When I try to run the application using npm start
, I receive the following error in the console:当我尝试使用
npm start
运行应用程序时,我在控制台中收到以下错误:
SyntaxError: E:\Projects\personal\rental-application\node_modules\react-validation\src\components\input\index.js: Support for the experimental syntax 'jsx' isn't cur rently enabled (6:3):
SyntaxError: E:\Projects\personal\rental-application\node_modules\react-validation\src\components\input\index.js: 对实验语法 'jsx' 的支持当前未启用 (6:3):
const Input = ({ error, isChanged, isUsed, ...props }) => (
const Input = ({ error, isChanged, isUsed, ...props }) => (
| ^ <input {...props} {...( isChanged && isUsed && error? { className: `is-invalid-input ${props.className}` }: { className: props.className } )} />
I have not explicitly done any babel configuration and my package.json
file has the following content:我没有明确地做任何 babel 配置,我的
package.json
文件有以下内容:
{
"name": "rental-application",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.0",
"jquery": "^3.5.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4",
"popper.js": "1.16.1",
"css-loader": "^5.0.1",
"react-bootstrap": "^1.4.3",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"axios": "^0.21.1",
"react-notifications": "^1.7.2",
"react-fontawesome": "^1.7.1",
"react-table": "^6.11.4",
"react-validation": "^3.0.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"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/plugin-transform-async-to-generator": "^7.12.1",
"react-router-dom": "^5.2.0",
"react-table-6": "^6.11.0"
}
}
My project structure:我的项目结构:
++node_modules
++public
+++index.html
+++manifest.json
+++robots.txt
++src
+++App.js
+++index.js
+++index.css
++package.json
++package-lock.json
You can see I am not using any other configuration, and I have initiated the project using create-react-app command.你可以看到我没有使用任何其他配置,并且我已经使用 create-react-app 命令启动了项目。
Input in react-validation lies under build folder. react-validation 中的输入位于 build 文件夹下。 But from the error it seems that you didn't imported Input properly: SyntaxError: E:\Projects\personal\rental-application\node_modules\react-validation\ src\components\input \index.js: Support for the experimental syntax 'jsx' isn't currently enabled (6:3):
但是从错误看来,您没有正确导入 Input: SyntaxError: E:\Projects\personal\rental-application\node_modules\react-validation\ src\components\input \index.js: Support for the experimental syntax ' jsx' 当前未启用 (6:3):
Can you please check your import statement?你能检查一下你的进口声明吗? It should be something like this:
它应该是这样的:
import Input from "react-validation/build/input";
As it is suggest in this thread, run bundle exec rails webpacker:install:react
.正如此线程中所建议的那样,运行
bundle exec rails webpacker:install:react
。 It will add that bit to the babel.config.js automatically.它会自动将该位添加到 babel.config.js 中。 You will not need to manually do something.
您无需手动执行某些操作。
. . .
. .
. .
. .
. .
.
You should install @babel/preset-react
as it is suggested in the error message.您应该按照错误消息中的建议安装
@babel/preset-react
。
Using npm:使用 npm:
npm install --save-dev @babel/preset-react
or using yarn:或使用纱线:
yarn add @babel/preset-react --dev
See our website @babel/preset-react for more information.请参阅我们的网站@babel/preset-react了解更多信息。 Ref: https://github.com/babel/babel/tree/master/packages/babel-preset-react
参考: https://github.com/babel/babel/tree/master/packages/babel-preset-react
. . .
. .
. .
. .
. .
.
Alternatively, if the first proposal doesn't work, as it is suggested in this thread , you should update babel.config.js
, so it will work.或者,如果第一个建议不起作用,正如这个线程中所建议的那样,你应该更新
babel.config.js
,这样它就会起作用。 So update the file as it is suggested:因此,按照建议更新文件:
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
['@babel/preset-react', {targets: {node: 'current'}}] // add this
]
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.