react启动报错 Support for the experimental syntax 'decorators-legacy' isn't currently enabled:

当在React项目中遇到“Support for the experimental syntax 'decorators-legacy' isn't currently enabled”这样的错误时，这表明你的代码中使用了装饰器（Decorators），这是一个ES7特性，在当前的Babel编译器设置中并没有启用对装饰器的支持。装饰者是一种在JavaScript函数或类声明之前添加元数据的方式。

要解决这个问题，你需要做以下几步操作：

1. **确认Babel配置**：检查你的.babelrc或package.json文件中，确保已经包含了对装饰器语法的支持。例如，添加`@babel/plugin-proposal-decorators`插件，并且将它的运行模式设为stage-0或更高。

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "runtime": true }]
  ]
}

2. **更新Babel版本**：如果使用的是旧版Babel，可能需要升级到支持ES装饰者的版本。

3. **重启开发服务器**：保存更改后，关闭并重新启动你的开发服务器，让Babel应用新的配置。

4. **检查代码风格规范**：某些项目可能有自己的代码规范，确认是否允许使用装饰器。

5. **测试**：一旦配置好，你应该能在代码中使用装饰器而不会再收到上述错误。

相关问题

react项目中报错 Support for the experimental syntax ‘jsx‘ isn‘t currently enabled

在React项目的开发过程中，如果遇到 "Support for the experimental syntax 'jsx' isn't currently enabled" 这样的错误，通常意味着你在代码中使用了ES6的JSX语法，但Babel这个用于转换JavaScript源码到兼容旧浏览器版本的工具没有正确配置来处理 JSX 。

JSX 是一种 React 的专用语法扩展，它使得HTML的元素和属性看起来像JavaScript那样编写。解决这个问题，你需要检查以下几个步骤：

1. 确保已经安装了 Babel 和相关的插件，如 @babel/preset-react，这可以帮助转译JSX。

   npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

2. 配置 .babelrc 或者 package.json 文件中的babel配置，添加对 JSX 支持。例如，在`.babelrc`文件中加入：

   {
     "presets": ["@babel/preset-env", "@babel/preset-react"]
   }

3. 如果你是通过创建新的React应用（如使用create-react-app），检查`config-overrides.js`或`babel.config.js`等配置文件是否已启用jsx支持。

4. 如果使用Webpack或其他构建工具，请确保它们也包含了对Babel的支持，并配置好针对JSX的规则。

5. 重启开发服务器，让配置生效。

这里的div会报错Support for the experimental syntax 'jsx' isn't currently enabled (154:9):

这个错误提示是由于你的代码中使用了JSX语法，但是Babel编译器并没有开启对JSX语法的支持。你需要在Babel配置文件中添加对JSX语法的支持。

你可以在Babel配置文件中添加以下代码：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

这个配置将启用对ES6+和React语法的支持。如果你只需要启用JSX语法的支持，可以修改配置为：

{
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

这个配置只启用了对JSX语法的支持。