当我在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"
}
}
babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
但是错误仍然存在,这是什么问题?
答案 0 :(得分:37)
更改
"plugins": [
"@babel/plugin-proposal-class-properties"
]
收件人
"plugins": [
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
这对我有用
答案 1 :(得分:20)
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-class-properties"
]
]
}
用上面的代码替换您的.babelrc文件。它为我解决了这个问题。
答案 2 :(得分:16)
我只是通过在Webpack配置插件中添加@babel/plugin-proposal-class-properties
来解决此问题。
我的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 :(得分:16)
在我的工作环境根目录中,.babelrc文件不存在。但是,在package.json中输入以下内容即可解决此问题。
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]}
注意:在执行npm或yarn命令之前,请不要忘记退出控制台并重新打开。
答案 4 :(得分:7)
有两种处理反应状态的方法:
选项 1: 只需添加到 package.json:
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
选项 2:
1.在根文件夹中创建一个名为 .babelrc 的文件。
用 .babelrc 编写:
{ "plugins": ["@babel/plugin-proposal-class-properties"] }
npm i @babel/plugin-proposal-class-properties
3.运行:
npm run dev
or
npm run watch
答案 5 :(得分:6)
安装plugin-proposal-class-properties
import matplotlib.pyplot as plt
# Introduce a column *bin* holding left limits of our bins.
df['bin'] = pd.cut(df['volume2'], 50).apply(lambda bin: bin.left)
# Group by bins and calculate *f*.
g = df[['bin', 'universe']].groupby('bin').sum()
# Plot the function using cumulative=True.
plt.hist(list(g.index), bins=50, weights=list(g['universe']), cumulative=True)
plt.show()
通过添加来更新webpack.config.js
npm install @babel/plugin-proposal-class-properties --save-dev
答案 6 :(得分:4)
我刚刚在Laravel Framework 5.7.19上进行了测试,以下步骤有效:
确保.babelrc文件位于应用程序的根文件夹中,并添加以下代码:
Increment
运行{
"plugins": ["@babel/plugin-proposal-class-properties"]
}
。
运行npm install --save-dev @babel/plugin-proposal-class-properties
。
答案 7 :(得分:4)
经过将近3个小时的搜索并花在相同错误上的时间之后,我发现我正在对React使用名称导入:
import { React } from 'react';
这是完全错误的。只需将其切换为:
import React from 'react';
所有错误都消失了。 我希望这可以帮助别人。这是我的.babelrc:
{
"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'
})
]
}
package.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"
}
}
答案 8 :(得分:3)
首先安装: @ 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开发服务器以使更改生效。
答案 9 :(得分:3)
yarn add --dev @babel/plugin-proposal-class-properties
或
npm install @babel/plugin-proposal-class-properties --save-dev
.babelrc
答案 10 :(得分:2)
我发现我的.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',
],
};
它在React Native应用程序上对我有效,我认为这也将对React应用程序有所帮助。
答案 11 :(得分:1)
我在用纱。我必须执行以下操作来克服此错误。
yarn add @babel/plugin-proposal-class-properties --dev
答案 12 :(得分:1)
如果某个人在react-native-web-monorepo之后从事monorepo的工作,则需要config-overrides.js
到packages/web
中归档。您需要在该文件中添加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
};
答案 13 :(得分:1)
您必须安装
npm install @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react 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"
]
}
}]
}
]
}
}
答案 14 :(得分:1)
在尝试使用babel转换一些jsx时,我遇到了同样的问题。以下是对我有用的解决方案。您可以将以下json添加到您的 .babelrc
{
"presets": [
[
"@babel/preset-react",
{ "targets": { "browsers": ["last 3 versions", "safari >= 6"] } }
]
],
"plugins": [["@babel/plugin-proposal-class-properties"]]
}
答案 15 :(得分:1)
对于使用webpack的react项目:
.babelrc
和package.json
的根文件夹中创建webpack.config.js
(如果不存在)文件,并在其中添加以下代码:
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
webpack.config.js
文件中:
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ["@babel/preset-env", "@babel/preset-react"]
},
resolve: {
extensions: ['.js', '.jsx']
}
}
npm start
。答案 16 :(得分:0)
确保您没有错误地导入 import BrowserRouter from "react-router-dom/modules/BrowserRouter";
而不是 import {BrowserRouter} from "react-router-dom";
答案 17 :(得分:0)
用于弹出的create-react-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 */
],
答案 18 :(得分:0)
尝试了以上所有解决方案,但没有一个起作用。尝试将表添加到类时会出现此问题。
npm我反应本地表组件,然后运行App.js。
./ node_modules / react-native-table-component / components / cell.js 语法错误:C:\ Users \ Dileep \ finaltest \ node_modules \ react-native-table-component \ components \ cell.js:目前未启用对实验语法'classProperties'的支持(5:20):
将@ babel / plugin-proposal-class-properties(https://git.io/vb4SL)添加到Babel配置的“插件”部分,以启用转换。
答案 19 :(得分:0)
我为src / components创建了一个符号链接-> ../../components,导致npm start
陷入困境,并停止将src / components / *。js解释为jsx,从而产生了同样的错误。官方babel对其进行修复的所有说明均无济于事。
当我复制回components目录时,一切都恢复正常!
答案 20 :(得分:0)
根据this GitHub问题,如果您使用create-react-app,则应将.babelrc
或babel.config.js
配置复制到webpack.config.js
并删除它们。由于两个代码行babelrc: false,configFile: false,
在babelrc中的配置是无效的。
并且您的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'],
.
.
.
答案 21 :(得分:0)
添加
"plugins": [
[
"@babel/plugin-proposal-class-properties"
]
]
进入.babelrc
对我有用。
答案 22 :(得分:0)
将state
内的constructor function
移动对我来说是有效的:
...
class MyComponent extends Component {
constructor() {
super()
this.state = {}
}
}
...
祝你好运...
答案 23 :(得分:0)
我正在显式使用babel解析器。以上解决方案均不适合我。这行得通。
const ast = parser.parse(inputCode, {
sourceType: 'module',
plugins: [
'jsx',
'classProperties', // '@babel/plugin-proposal-class-properties',
],
});