logo标签列表

当前未启用对实验性语法"classProperties"的支持。

reactjswebpackbabeljs
174

在我将React集成到Django项目中时，遇到了以下错误：

ModuleBuildError：模块构建失败（来自./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中。 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"
  ]
}

然而错误仍然存在，问题出在哪里？
你不应该同时使用 @babel/plugin-proposal-class-properties 和 babel-plugin-transform-class-properties。你安装后重新构建了吗？ - SamVK
你正在运行哪个版本的Babel？ - SamVK
分享你的 package.json 文件。 - Sakhi Mansoor
我编辑了我的 package json。 - 1Sun
尝试运行 npx babel-upgrade --write --install - FDisk
@FDisk，这个不起作用。 - secondman
23个回答
5
根据此 GitHub问题，如果您使用create-react-app，则应将您的.babelrc或babel.config.js配置复制到webpack.config.js并删除它们。由于这两行代码babelrc: false, configFile: false,，因此您在babelrc中的配置是无用的。而您的webpack.config.js位于./node_modules/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'],
                .
                .
                .
你有在React Scripts中编辑webpack配置吗？那只会导致在下一次npm i时被覆盖。那么应该进行弹出操作。 - Tosh
我只是按照GitHub页面上的说明做了一些操作，那时解决了我的问题。 - zeia soroush
4

我明确使用babel解析器，以上解决方案都对我无效。这个方法有效。

const ast = parser.parse(inputCode, {
      sourceType: 'module',
      plugins: [
        'jsx',
        'classProperties', // '@babel/plugin-proposal-class-properties',
      ],
    });
我应该在哪里添加这段代码？ 你使用React JS吗？ - MoHammaD ReZa DehGhani
1
这段代码是用于开发 Babel 插件的。是的，我的插件是针对 JSX 的。https://github.com/Ghost---Shadow/i18nize-react - Souradeep Nanda
3

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

或者

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

以上是安装Babel插件的命令，该插件用于支持JavaScript中的类属性提案。您可以使用yarn或npm进行安装，具体取决于您的项目配置。请务必将其添加到开发依赖项中，并在.babelrc文件中进行配置。
3

我正在使用yarn。为了克服错误，我必须执行以下操作。

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

针对被弹出的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 */
  ],
3
添加
"plugins": [
    [
      "@babel/plugin-proposal-class-properties"
    ]
  ]

将内容添加到.babelrc对我来说很有效。
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"
            ]
          }
        }]
      }
    ]
  }
}
1
针对使用webpack的React项目：
  1. 执行：npm install @babel/plugin-proposal-class-properties --save-dev
  2. 在根目录下创建 .babelrc 文件（如果不存在），并添加以下代码：

{
  "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。
1

当我试图使用babel转译一些jsx时，我遇到了相同的问题。以下是适用于我的解决方案。您可以将以下json添加到您的.babelrc文件中。

{
  "presets": [
    [
      "@babel/preset-react",
      { "targets": { "browsers": ["last 3 versions", "safari >= 6"] } }
    ]
  ],
  "plugins": [["@babel/plugin-proposal-class-properties"]]
}
1
如果有人在使用react-native-web-monorepo进行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
};
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接