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

reactjs React.js

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

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

第1301篇《目前未启用对实验语法“ classProperties”的支持》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答
西门达蒙 2020.03.12

新增中 

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

到.babelrc了我的作品。

小哥Eva 2020.03.12

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

yarn add @babel/plugin-proposal-class-properties --dev
西门樱Eva 2020.03.12

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

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

祝好运...

小卤蛋十三 2020.03.12

首先安装：@ 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 
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
}

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

前端猴子 2020.03.12

我刚刚在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

更改

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

至

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

这对我有用

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android