Django 프로젝트에서 React를 설정하는 동안이 오류가 발생했습니다.

모듈 빌드의 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"
  }
}

바벨 르크

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

그러나 오류는 여전히 존재합니다. 무엇이 문제입니까 ??

답변

변화

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

에

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

이것은 나를 위해 일했습니다.

답변

웹팩 프로젝트 솔루션

@babel/plugin-proposal-class-propertieswebpack config 플러그인 에 추가하여이 문제를 해결했습니다 . 내 모듈 섹션은 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']}]
            }
        }
    ]
}

답변

먼저 @ 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"
      ]
  ]
}

package.json 이 있는 루트 디렉토리에있는 .babelrc 파일 .

변경 사항을 적용하려면 웹팩 개발 서버를 다시 시작해야합니다.

답변

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

.babelrc 파일을 위의 코드로 바꿉니다. 그것은 나를 위해 문제를 해결했습니다.

답변

내 작업 환경 루트에는 .babelrc 파일이 없습니다. 그러나 package.json의 다음 항목으로 문제가 해결되었습니다.

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

참고 : npm 또는 yarn 명령을 실행하기 전에 콘솔을 종료하고 다시 여는 것을 잊지 마십시오.

답변

거의 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"
  }
}

답변

plugin-proposal-class-properties 설치
npm install @babel/plugin-proposal-class-properties --save-dev
다음을 추가하여 webpack.config.js를 업데이트하십시오.
'plugins': ['@babel/plugin-proposal-class-properties']}]