当前未启用对实验性语法“classProperties”的支持

IT技术 reactjs webpack babeljs

2021-04-08 00:57:34

当我在 Django 项目中设置 React 时，我遇到了这个错误

ModuleBuildError in Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Users\1Sun\Cebula3\cebula_react\assets\js\index.js: 支持实验语法'classProperties ' 当前未启用 (17:9)：

  15 | 
  16 | class BodyPartWrapper extends Component {
> 17 |   state = {
     |         ^
  18 | 
  19 |   }
  20 | 

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 
'plugins' section of your Babel config to enable transformation.

所以，我安装了@babel/plugin-proposal-class-properties 并将其放入 babelrc

包.json

{
  "name": "cebula_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "react-hot-loader": "^4.3.6",
    "webpack": "^4.17.2",
    "webpack-bundle-tracker": "^0.3.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  }
}

巴别尔

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

但是错误仍然存在，是什么问题？？

6个回答

改变

"plugins": [
    "@babel/plugin-proposal-class-properties"
  ]

到

"plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]

这对我有用

这对我不起作用。我没有弹出反应应用程序

2021-06-10 00:57:34

Ubuntu的18 -我不得不重新命名.babelrc，以babel.config.js和使用module.export像stackoverflow.com/questions/53916434/...在github上所讨论的github.com/babel/babel/issues/7879#issuecomment-419732313

2021-06-11 00:57:34

npm i --save-dev @babel/plugin-proposal-class-properties

2021-06-12 00:57:34

Test suite failed to run; .loose is not a valid Plugin property

2021-06-16 00:57:34

@DavidCallanan 解决这个问题，只需删除第二个参数（{"loose": true}}

2021-06-18 00:57:34

首先安装：@babel/plugin-proposal-class-properties作为开发依赖：

npm install @babel/plugin-proposal-class-properties --save-dev

然后编辑您的 .babelrc 使其完全像这样：

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ],
  "plugins": [
      [
        "@babel/plugin-proposal-class-properties"
      ]
  ]
}

.babelrc文件位于package.json所在的根目录中。

请注意，您应该重新启动 webpack 开发服务器以使更改生效。

反应 17，即。

2021-06-09 00:57:34

这个对我有用，谢谢。我认为是 babel 7.0+ 的解决方案

2021-06-20 00:57:34

使用 React 18 在 IDE 中对我不起作用。 React 应用程序确实可以工作，但是每次在 IDE 中扫描文件时都会出现一个丑陋的错误。

2021-06-20 00:57:34

webpack项目的解决方案

我只是通过添加@babel/plugin-proposal-class-properties到 webpack 配置插件来解决这个问题。我的module部分webpack.config.js看起来像这样

module: {
    rules: [
        {
            test: path.join(__dirname, '.'),
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env',
                          '@babel/react',{
                          'plugins': ['@babel/plugin-proposal-class-properties']}]
            }
        }
    ]
}

完美地为我工作 - 对此感到困惑好几天......非常感谢。

2021-06-01 00:57:34

当你使用 webpack 时，这应该是正确的答案，因为有很多配置文件（比如 webpack.config.js、package.json 和 .babelrc）并不好 - github.com/babel/babel/issues/8655#问题评论-419795548

2021-06-04 00:57:34

那是哪一个webpack.config.js？我目前得到 3 个。

2021-06-11 00:57:34

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
}

用上面的代码替换你的 .babelrc 文件。它为我解决了这个问题。

这是直截了当的。碰巧我错过了@babel/plugin-proposal-class-properties依赖。

2021-05-26 00:57:34

它有效，但请确保先安装 @babel/plugin-proposal-class-properties

2021-05-31 00:57:34

如果您已弹出 create-react-app，请使用此配置更改 webpack.config.demo 和 package.json 中的任何配置。这意味着运行npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

2021-06-09 00:57:34

在我的工作环境根目录中，.babelrc 文件不存在。但是，在 package.json 中的以下条目解决了这个问题。

"babel": {
"presets": [
  "@babel/preset-env",
  "@babel/preset-react"
],
"plugins": [
  "@babel/plugin-proposal-class-properties"
]}

注意：在执行 npm 或 yarn 命令之前，不要忘记退出控制台并重新打开。

其它你可能感兴趣的问题

上一篇sh：react-scripts：运行 npm start 后找不到命令下一篇警告：数组或迭代器中的每个孩子都应该有一个唯一的“键”props。检查`ListView`的渲染方法