Trong khi thiết lập React trong dự án Django, tôi đã gặp lỗi này

ModuleBuildError trong xây dựng Mô-đun không thành công (từ ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ asset \ js \ index.js: Hỗ trợ cho cú pháp thử nghiệm 'classProperties 'hiện không được bật (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.

Vì vậy, tôi đã cài đặt @ babel / plugin-suggest-class-properties và đặt cái này vào 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"
  ]
}

Tuy nhiên lỗi vẫn tồn tại, vấn đề là gì ??

Thay đổi

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

Đến

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

Điều này đã làm việc cho tôi

Giải pháp cho dự án webpack

Tôi chỉ giải quyết vấn đề này bằng cách thêm @babel/plugin-proposal-class-propertiesvào plugin cấu hình webpack. Phần mô-đun của tôi webpack.config.jstrông như thế này

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

Trước tiên, hãy cài đặt: @ babel / plugin-suggest-class-properties dưới dạng dev dependencty:

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

Sau đó, chỉnh sửa .babelrc của bạn để nó sẽ chính xác như thế này:

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

Tệp .babelrc nằm trong thư mục gốc, nơi có package.json .

Lưu ý rằng bạn nên khởi động lại máy chủ webpack dev của mình để các thay đổi có hiệu lực.

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

thay thế tệp .babelrc của bạn bằng mã trên. nó đã khắc phục sự cố cho tôi.

Trong thư mục gốc môi trường làm việc của tôi, tệp .babelrc không có ở đó. Tuy nhiên, mục nhập sau trong package.json đã giải quyết được vấn đề.

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

Lưu ý: Đừng quên thoát khỏi bảng điều khiển và mở lại trước khi thực hiện các lệnh npm hoặc sợi.

Sau gần 3 giờ tìm kiếm và dành thời gian cho cùng một lỗi, tôi thấy rằng tôi đang sử dụng nhập tên cho React:

import { React } from 'react';

đó là hoàn toàn sai. Chỉ bằng cách chuyển nó thành:

import React from 'react';

tất cả các lỗi đã biến mất. Tôi hi vọng điêu nay se giup được ai đo. Đây là .babelrc của tôi:

{
  "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'
    })
  ]
}

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

• Cài đặt plugin-đề xuất-lớp-thuộc tính npm install @babel/plugin-proposal-class-properties --save-dev

• Cập nhật webpack.config.js của bạn bằng cách thêm 'plugins': ['@babel/plugin-proposal-class-properties']}]

Tôi thấy sự cố của mình .babelrcđã bị bỏ qua, Tuy nhiên, tôi tạo babel.config.jsvà thêm những thứ sau:

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',
  ],
};

Và nó hoạt động với tôi trên ứng dụng React Native, tôi nghĩ điều này cũng sẽ giúp ích cho các ứng dụng React.

Tôi vừa thử nghiệm trên Laravel Framework 5.7.19 và các bước sau hoạt động:

Đảm bảo tệp .babelrc của bạn nằm trong thư mục gốc của ứng dụng và thêm mã sau:

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

Chạy đi npm install --save-dev @babel/plugin-proposal-class-properties.

Chạy đi npm run watch.

Tôi đang sử dụng trình phân tích cú pháp babel một cách rõ ràng. Không có giải pháp nào ở trên phù hợp với tôi. Điều này đã hiệu quả.

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

Theo này vấn đề GitHub nếu bạn sử dụng tạo-phản ứng ứng dụng bạn nên sao chép của bạn .babelrchoặc babel.config.jscấu hình để webpack.config.jsvà those.because xóa của htis hai dòng mã babelrc: false,configFile: false,cấu hình của bạn trong babelrc, .. là vô dụng. và của bạn webpack.config.jsđang ở trong ./node_madules/react-scripts/configthư mục của bạn Tôi đã giải quyết vấn đề của mình như sau:

{
              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'],
                .
                .
                .

Di chuyển statebên trong constructor functionlàm việc cho tôi:

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

Chúc may mắn...

Tôi đang sử dụng sợi. Tôi đã phải làm như sau để khắc phục lỗi.

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

Thêm

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

vào .babelrccông việc cho tôi.

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

hoặc là

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

Nếu một số người làm việc trên monorepo sau react -native-web-monorepo thì bạn cần phải config-overrides.jsnộp hồ sơ packages/web. bạn cần thêm resolveApp('../../node_modules/react-native-ratings'),vào tệp đó ...

config-override.jsTệp hoàn chỉnh của tôi là

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
};

Tôi đã tạo một liên kết biểu tượng cho src / components -> ../../components gây ra lỗi npm startvà ngừng diễn giải src / components / *. Js thành jsx, do đó gây ra lỗi tương tự. Tất cả các hướng dẫn để sửa nó từ babel chính thức là vô ích. Khi tôi sao chép lại thư mục thành phần, mọi thứ đều TRỞ LẠI BÌNH THƯỜNG!

Tôi phải đối mặt với vấn đề tương tự khi cố gắng chuyển đổi một số jsx với babel. Dưới đây là giải pháp đã làm việc cho tôi. Bạn có thể thêm json sau vào .babelrc của mình

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