programing

실험 구문 'classProperties'에 대한 지원이 현재 설정되어 있지 않습니다.

showcode 2023. 3. 26. 11:58

실험 구문 'classProperties'에 대한 지원이 현재 설정되어 있지 않습니다.

장고 내에서 리액트(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에 저장했습니다.

패키지.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-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은.

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

웹 팩 프로젝트용 솔루션

이 문제를 요.@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']}]
            }
        }
    ]
}

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

.babelrc 파일을 위의 코드로 바꿉니다.문제가 해결됐어요

내 작업 환경 루트에는 .babelrc 파일이 없었습니다.단, 패키지의 다음 항목입니다.json은 문제를 해결했다.

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

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

반응 상태에는 다음 두 가지 방법이 있습니다.

옵션 1: 패키지에 추가하기만 하면 됩니다.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/syslog-class-properties

3. 실행:

npm run dev
or
npm run watch

거의 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.config.displays.webpack

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

[ ] 의 state내 the의 constructor function: 작업 완료:

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

행운을 빈다...

plugin-proposal-class-properties를 합니다.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',
  ],
};

리액트 네이티브 어플리케이션에서도 사용할 수 있고, 리액트 어플리케이션에도 도움이 될 것 같습니다.

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

저는 babel 파서를 명시적으로 사용하고 있습니다.위의 솔루션 중 어느 것도 나에게 효과가 없었다.이거 성공했어.

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

실을 쓰고 있어요.오류를 극복하기 위해 다음과 같이 해야 했습니다.

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

추가 중

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

안으로.babelrc잘 먹히네요.

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

또는

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

꺼낸 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 */
  ],

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

jsx를 babel로 변환하려다 같은 문제에 직면했습니다.아래는 나에게 효과가 있었던 해결책입니다..babelrc에 다음 json을 추가할 수 있습니다.

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

웹 팩을 사용한 반응 프로젝트의 경우:

실행: npm install @babel/plugin-proposal-class-properties --save-dev
만들다.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다시.

를 인스톨 할 필요가 있습니다.

npm install @babel/core @babel/sublic-class-properties @babel/sublic-env @babel/sublic-babel-sublic-sublics

그리고.

입력과 출력을 변경하다

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

src/components -> ../../components의 심볼링크를 작성했습니다.이 링크는 원인이 됩니다.npm startsrc/components/.*를 jsx로 해석하는 것을 중지하면 동일한 오류가 발생합니다.공식 개벨의 모든 수리 지시는 소용이 없었다.컴포넌트 디렉토리를 카피했을 때는, 모든 것이 정상으로 돌아갔습니다.

잘못 Import하지 않았는지 확인합니다.import BrowserRouter from "react-router-dom/modules/BrowserRouter";대신import {BrowserRouter} from "react-router-dom";

타이프스크립트 업데이트 후 이 문제가 발생하면useDefineForClassFields: falsetsconfig 파일로 이동합니다.

참조: https://www.typescriptlang.org/tsconfig#useDefineForClassFields

언급URL : https://stackoverflow.com/questions/52237855/support-for-the-experimental-syntax-classproperties-isnt-currently-enabled

'programing' 카테고리의 다른 글

Woocommerce는 각 카테고리와 제품을 보여줍니다. (0)	2023.03.26
JSON 값 1 또는 0 - int 또는 boolean (0)	2023.03.26
Axios: 여러 API 요청 연결 (0)	2023.03.26
Azure Cloud Service에서 Azure MySQL over SSL에 연결하도록 Wordpress 구성 (0)	2023.03.26
ORA-12560: TNS: 프로토콜어댑터 오류 (0)	2023.03.26

현재글실험 구문 'classProperties'에 대한 지원이 현재 설정되어 있지 않습니다.

각종 프로그래밍 정보를 다루는 블로그입니다.

TypeScript, Python, spring-boot, Eclipse, ASP.NET, oracle, AngularJS, Excel, Ajax, JSON, sql-server, android, MongoDB, WordPress, WPF, reactjs, SWIFT, bash, Windows, git,

Today :
Yesterday :

showcode

실험 구문 'classProperties'에 대한 지원이 현재 설정되어 있지 않습니다.

실험 구문 'classProperties'에 대한 지원이 현재 설정되어 있지 않습니다.

웹 팩 프로젝트용 솔루션

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

실험 구문 'classProperties'에 대한 지원이 현재 설정되어 있지 않습니다.

실험 구문 'classProperties'에 대한 지원이 현재 설정되어 있지 않습니다.

웹 팩 프로젝트용 솔루션

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바