目前还没有启用对实验语法“ classProperties”的支持

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

中的 ModuleBuildError 模块构建失败(来自./node _ Module/babel-loader/lib/index.js) : SyntaxError: C: Users 1Sun Cebula3 cebula _ response asset js index.js: Support 语法错误: C: 用户1Sun Cebula3 cebula3反应资产 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- 建议-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"
}
}

Babelrc

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

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

182018 次浏览
小开

改变

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

敬

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

这招对我很管用

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

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

小开

WebPack 项目解决方案

我只是通过将 @babel/plugin-proposal-class-properties添加到 webpack 配置插件中来解决这个问题。 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']}]
}
}
]
}
小开

经过近3个小时的搜索和花费时间在同一个错误上，我发现我正在使用名称导入的反应:

import { React } from 'react';

这是完全错误的。只要把它切换到:

import React from 'react';

所有的错误都消失了。 我希望这对某人有帮助。这是我的:

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

Webpack.config.js

const path = require('path');
const devMode = process.env.Node_ENV !== 'production';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/App.js',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'App.js'
},
mode: 'development',
devServer: {
contentBase: path.resolve(__dirname, 'public'),
port:9090,
open: 'google chrome',
historyApiFallback: true
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},{
test: /\.(sa|sc|c)ss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]--[hash:base64:5]',
sourceMap: true
}
},{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
})
]
}

包裹 Json

{
"name": "expense-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"css-loader": "^1.0.0",
"mini-css-extract-plugin": "^0.4.3",
"node-sass": "^4.9.3",
"react-router-dom": "^4.3.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"normalize.css": "^8.0.0",
"react": "^16.5.2",
"react-dom": "^16.5.2"
}
}
小开

  • 安装 plugin- 提议-类-属性 npm install @babel/plugin-proposal-class-properties --save-dev

  • 通过添加以下内容来更新 webpack.config.js 'plugins': ['@babel/plugin-proposal-class-properties']}]

小开

我发现我的 .babelrc被忽略了，但是我创建了 babel.config.js并添加了以下内容:

module.exports = {
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-regenerator',
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
},
],
],
presets: [
"@babel/preset-flow",
'module:metro-react-native-babel-preset',
],
};

它对我的反应本机应用程序工作，我认为这也将有助于反应应用程序。

小开

我在用纱线。我必须做以下工作来克服这个错误。

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

首先将: @ babel/plugin-建议类-属性作为开发依赖项安装:

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

然后编辑你的.babelrc，这样它就会像下面这样:

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

. babelrc 文件位于根目录中，其中有 包裹 Json。

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

小开

我正在明确地使用巴别塔解析器。上面的解决方案对我来说都不管用。这个解决方案管用。

const ast = parser.parse(inputCode, {
sourceType: 'module',
plugins: [
'jsx',
'classProperties', // '@babel/plugin-proposal-class-properties',
],
});
小开

把 state移动到 constructor function内部对我来说很有效:

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

祝你好运..。

小开

如果有人在 反应-本地-网络-单核细胞之后进行 monorepo 工作，那么你需要在 packages/web中进行 config-overrides.js文件。你需要在那个文件中加入 resolveApp('../../node_modules/react-native-ratings'),..。

我的完整 config-override.js文件是

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');


const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);


// our packages that will now be included in the CRA build step
const appIncludes = [
resolveApp('src'),
resolveApp('../components/src'),
resolveApp('../../node_modules/@react-navigation'),
resolveApp('../../node_modules/react-navigation'),
resolveApp('../../node_modules/react-native-gesture-handler'),
resolveApp('../../node_modules/react-native-reanimated'),
resolveApp('../../node_modules/react-native-screens'),
resolveApp('../../node_modules/react-native-ratings'),
resolveApp('../../node_modules/react-navigation-drawer'),
resolveApp('../../node_modules/react-navigation-stack'),
resolveApp('../../node_modules/react-navigation-tabs'),
resolveApp('../../node_modules/react-native-elements'),
resolveApp('../../node_modules/react-native-vector-icons'),
];


module.exports = function override(config, env) {
// allow importing from outside of src folder
config.resolve.plugins = config.resolve.plugins.filter(
plugin => plugin.constructor.name !== 'ModuleScopePlugin'
);
config.module.rules[0].include = appIncludes;
config.module.rules[1] = null;
config.module.rules[2].oneOf[1].include = appIncludes;
config.module.rules[2].oneOf[1].options.plugins = [
require.resolve('babel-plugin-react-native-web'),
require.resolve('@babel/plugin-proposal-class-properties'),
].concat(config.module.rules[2].oneOf[1].options.plugins);
config.module.rules = config.module.rules.filter(Boolean);
config.plugins.push(
new webpack.DefinePlugin({ __DEV__: env !== 'production' })
);


return config
};
小开

添加

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

进入 .babelrc为我工作。

小开

根据 这个 GitHub 的问题，如果你使用 create-response-app，你应该将你的 .babelrc或 babel.config.js配置复制到 webpack.config.js并删除它们。.毫无用处。 你的 webpack.config.js在你的 ./node_madules/react-scripts/config文件夹里 我这样解决了我的问题:

{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },


],
'@babel/preset-env', '@babel/preset-react'
],
plugins: ['@babel/plugin-proposal-class-properties'],
.
.
.
小开

在我的工作环境 root 中，. babelrc 文件不存在。

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

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

小开

我为 src/Component-> 创建了一个 symlink。./../组件导致 npm start失控并停止解释 src/组件/* 。Js 作为 jsx，因此产生相同的错误。官方 Babel发出的所有修复指令都没有用。 当我复制回组件目录时，一切都恢复正常了！

小开

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

或者

npm install @babel/plugin-proposal-class-properties --save-dev 。巴贝尔

小开

我在试图用巴贝尔翻译一些 jsx 时遇到了同样的问题。下面是对我有效的解决方案。您可以将以下 json 添加到 。巴贝尔

{
"presets": [
[
"@babel/preset-react",
{ "targets": { "browsers": ["last 3 versions", "safari >= 6"] } }
]
],
"plugins": [["@babel/plugin-proposal-class-properties"]]
}
小开

对于带有 webpack 的反应项目:

  1. 要做的: npm install@babel/plugin-amp-class-properties —— save-dev
  2. 在存在 package.json和 webpack.config.js的根文件夹中创建 .babelrc(如果不存在)文件，并在其中添加以下代码:

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

  1. 将以下代码添加到 webpack.config.js文件:

{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ["@babel/preset-env", "@babel/preset-react"]
},
resolve: {
extensions: ['.js', '.jsx']
}
}

  1. 关闭终端并再次运行 npm start。
小开

用于弹出的 create-response-app 项目

我刚刚解决了我的案子，在我的 webpack.config.js中加入了以下几行:

  presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
/* INSERT START */
require.resolve('@babel/preset-env'),
require.resolve('@babel/preset-react'),
{
'plugins': ['@babel/plugin-proposal-class-properties']
}
/* INSERTED END */
],
小开

你必须安装

Npm install@babel/core@babel/plugin-amp-class-properties@babel/preset-env@babel/preset-response babel-loader

还有

改变输入和输出

const path = require('path')
module.exports = {
entry: path.resolve(__dirname,'src', 'app.js'),
output: {
path: path.resolve(__dirname, "public","dist",'javascript'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
"targets": "defaults"
}],
'@babel/preset-react'
],
plugins: [
"@babel/plugin-proposal-class-properties"
]
}
}]
}
]
}
}
小开

有两种处理反应状态的方法:

选择1: 只要添加到 package.json:

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

选择2:

1. 在根文件夹中创建一个名为 。巴贝尔的文件。

写下来:

{ "plugins": ["@babel/plugin-proposal-class-properties"] }
  1. 跑步:

Npm i@babel/plugin- 提议-class-属性

3. 跑步:

npm run dev
or
npm run watch
小开

确保您没有错误地导入 import BrowserRouter from "react-router-dom/modules/BrowserRouter";而不是 import {BrowserRouter} from "react-router-dom";

小开

如果这发生在类型脚本更新之后，只需将 useDefineForClassFields: false添加到 tsconfig 文件。

见: https://www.typescriptlang.org/tsconfig#useDefineForClassFields


提交答案