React添加@ Babel /预设-react (https://git.io/JfeDR)到Babel配置的“预设”部分)以启用转换

Question

我想在我的表单中使用react验证组件Input。这就是我导入它的原因&在表单中用作：

<Input className="form-control"
       type="text"
       placeholder="name"
       value={props.data.creatingUser.createName}
       name="createName"
       id="createName"
       onChange={props.handleAddChange}
required/>

当我尝试使用npm start运行应用程序时，在控制台中会收到以下错误：

E:\Projects\personal\rental-application\node_modules\react-validation\src\components\input\index.js：：E：\Projects\personal\rental-application\node_modules\react-validation\src\components\input\index.js:对实验性语法'jsx‘的支持还没有完全启用(6:3)： const = ({ error，isChanged，isUsed，...props }) => (x^ is-invalid-input ${props.className} }：{ className: props.className } )} /> }

--我还没有显式地进行任何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"
  }
}

我的项目结构：

++node_modules

++public
+++index.html
+++manifest.json
+++robots.txt

++src
+++App.js
+++index.js
+++index.css

++package.json
++package-lock.json

您可以看到，我没有使用任何其他配置，我已经启动了使用创建-反应-应用程序命令的项目。

Answer 1

反应输入-验证在构建文件夹下。但从错误来看，您似乎没有正确导入输入: E:\Projects\personal\rental-application\node_modules\react-validation**src\components\input**\index.js：：SyntaxError对实验性语法'jsx‘的支持目前还没有启用(6:3)：

请您核对一下您的进口单好吗？应该是这样的：

import Input from "react-validation/build/input";

Answer 2

第一提案

正如这线程中所建议的那样，运行bundle exec rails webpacker:install:react。它将自动将该位添加到babel.config.js中。您不需要手动做一些事情。

。。。。。。

第二项建议

您应该按照错误消息中的建议安装@babel/preset-react。

利用国家预防机制：

npm install --save-dev @babel/preset-react

或使用纱线：

yarn add @babel/preset-react --dev

有关更多信息，请参阅我们的网站@babel/预设-反应。参考文献：https://github.com/babel/babel/tree/master/packages/babel-preset-react

。。。。。。

第三项建议

或者，如果第一个提议不起作用，正如这条线中所建议的那样，您应该更新babel.config.js，这样它就能工作了。因此，请按建议更新文件：

  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    ['@babel/preset-react', {targets: {node: 'current'}}] // add this
  ]
};