语法错误：React JS当前未启用实验性语法“jsx”支持。

Question

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

当前不支持实验性语法“jsx”(7: 9)：

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

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

- pratiksha chavan

Answer 1

如果您没有了解如何引导您的应用程序，就很难说，就像jaybhatt之前所说。

如果您使用了react-create-app，则可能会弄乱软件包并最终处于不一致状态。尝试重置您的应用程序。在另一个文件夹中创建应用程序并将代码迁移到那里是一种选择（我做过几次 :)！）。

如果您手动创建了应用程序结构，请检查webpack配置中是否也设置了"@babel/preset-react"：

rules: [
  {
    test: /\.(js|jsx)$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader',
    options: { presets: ['@babel/env', '@babel/preset-react'] },
  },

- BetoLima1

Answer 2

• 你能告诉我你的应用是从哪里引导的吗？（使用Create 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"
    ]
  }
  

- jaybhatt

---

我创建了babel.config.js文件并添加了上述内容，但仍然遇到相同的问题。 - pratiksha chavan

你能详细说明一下你从哪里克隆或引导你的项目吗？另外，我希望你从你创建的babel.config.js文件中导出默认设置。 - jaybhatt