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

Tom阳光2020-03-12

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

模块构建中的ModuleBuildError失败（来自./node_modules/babel-loader/lib/index.js）：语法错误：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中

package.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"
  ]
}

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

西门达蒙2020/03/12 20:13:42

新增中

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

到.babelrc了我的作品。

小哥Eva2020/03/12 20:13:42

我在用纱。我必须执行以下操作来克服该错误。

yarn add @babel/plugin-proposal-class-properties --dev

西门樱Eva2020/03/12 20:13:42

移动state内部constructor function为我工作：

...
class MyComponent extends Component {
  constructor(man) {
    super(man)
    this.state = {}
  }
}
...

祝好运...

小卤蛋十三2020/03/12 20:13:42

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

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开发服务器，以使更改生效。

Sam神奇2020/03/12 20:13:41

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

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

前端猴子2020/03/12 20:13:41

我刚刚在Laravel Framework 5.7.19上进行了测试，以下步骤可以正常工作：

确保您的.babelrc文件位于应用程序的根文件夹中，并添加以下代码：

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

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

运行npm run watch。

理查德村村小宇宙2020/03/12 20:13:41

更改

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

至

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

这对我有用

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer