语法错误：react js 当前未启用对实验性语法“jsx”的支持

Question

我正在尝试使用 npm start 命令运行我的 React 应用程序，并安装了 @babel/preset-react 和 @babel/plugin-syntax-jsx。但我正在运行这个反应应用程序，出现以下错误。

目前尚未启用对实验性语法“jsx”的支持 (7:9)：

   6 | const PostCodeLookup = props => {
>  7 |  return <PostcodeLookup {...props} />
     |         ^
   8 |
   9 | };
  

将 @babel/preset-react ( https://git.io/JfeDR ) 添加到 Babel 配置的“预设”部分以启用转换。如果您想保持原样，请将 @babel/plugin-syntax-jsx ( https://git.io/vb4yA ) 添加到“插件”部分以启用解析。

Answer 1

• 你能告诉你你的应用程序是从哪里启动的吗？（创建 React App 或类似的东西？）
• 另外，您需要有一个包含这些内容的.babelrc或babel.config.js(on)文件，仅安装软件包是行不通的。

下面举一个例子来说明你的babel.config.json外观应该是什么样子。如果您使用它，请从下面的示例中删除任何额外的插件。

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false,
          "targets": {
            "node": "current"
          }
        }
      ],
      "@babel/preset-react"
    ],
    "env": {
      "test": {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ],
        "plugins": [
          [
            "@babel/plugin-proposal-class-properties",
            {
              "spec": true
            }
          ]
        ]
      }
    },
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "spec": true
        }
      ],
      "@babel/plugin-proposal-object-rest-spread"
    ]
  }