वर्तमान में प्रायोगिक वाक्य रचना 'क्लासप्रोपरेट्स' के लिए समर्थन सक्षम नहीं है

Question

जब मैं Django परियोजना के भीतर प्रतिक्रिया स्थापित कर रहा था तो मुझे यह त्रुटि आई

मॉड्यूल बिल्ड में ModuleBuildError विफल (से ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun / Cebula3 \ cebula_react \ आस्तियों \ js \ index.js: प्रयोगात्मक वाक्यविन्यास वर्ग के लिए समर्थन। वर्तमान में सक्षम नहीं है (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- प्रस्ताव-वर्ग-गुण स्थापित किए और इसे 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"
  ]
}

हालाँकि त्रुटि अभी भी मौजूद है, समस्या क्या है ??

Comments

आपको / @babel/plugin-proposal-class-propertiesऔर दोनों की आवश्यकता नहीं होनी चाहिए babel-plugin-transform-class-properties। आप स्थापित करने के बाद पुनर्निर्माण कर रहे हैं, हाँ?

— सैमवीके

बबल का कौन सा संस्करण चल रहा है?

— सैमवीके

आपसे साझा करें पैकेज json

— सखी मंसूर

मैंने अपना पैकेज

— जसन

चलने की कोशिशnpx babel-upgrade --write --install

— FDisk

Answer 1

परिवर्तन

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

सेवा

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

इसने मेरे लिए काम किया

Comments

npm i - save-dev @ babel / प्लगइन-प्रस्ताव-वर्ग-गुण

— अभय शिरो

यह dd'nt मेरे लिए काम करते हैं। मैं प्रतिक्रिया ऐप

— सुप्रिया कलघटगी

उबंटू 18 - मैं नाम बदलने के लिए किया था .babelrcकरने के लिए babel.config.jsऔर उपयोग module.exportकी तरह stackoverflow.com/questions/53916434/... रूप GitHub पर विचार-विमर्श किया github.com/babel/babel/issues/7879#issuecomment-419732313

— फैब्रिजियो Bertoglio

Test suite failed to run; .loose is not a valid Plugin property

— डेविड कॉलानन

Answer 2

वेबपैक परियोजना के लिए समाधान

मैं सिर्फ @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']}]
            }
        }
    ]
}

Comments

जब आप वेबपैक का उपयोग करते हैं तो यह उचित उत्तर होना चाहिए, क्योंकि कई कॉन्फ़िगरेशन फ़ाइलों (जैसे webpack.config.js, package.json, और .babrc) के लिए अच्छा नहीं है - github.com/babel/babel/issues/8655#। जारीकरण-419795548

— मिरो जे

मेरे लिए पूरी तरह से काम किया - दिनों के लिए इस पर हैरान था ... बहुत बहुत धन्यवाद।

— samuelsaumanchan

Answer 3

पहले स्थापित करें: @ babel / प्लगइन-प्रस्ताव-वर्ग-गुण देव भरोसे के रूप में:

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 है।

ध्यान दें कि परिवर्तनों को प्रभावित करने के लिए आपको अपने वेबपैक देव सर्वर को फिर से शुरू करना चाहिए।

Comments

यह एक मेरे लिए काम करता है, धन्यवाद। मुझे लगता है कि बाबेल 7.0+ के लिए समाधान है

— ब्लैक होल

Answer 4

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

उपरोक्त कोड के साथ अपनी .babelrc फ़ाइल बदलें। इसने मेरे लिए मुद्दा तय कर दिया।

Comments

यदि आपने क्रिएट-रिएक्शन-ऐप को हटा दिया है, तो इस कॉन्फिगरेशन के साथ webpack.config.demo और package.json में किसी भी कॉन्फिगर को बदल दें। इसका मतलब है रनिंगnpm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

— फ्रांसिस्को हॉज

यह सीधा-सीधा था। ऐसा हुआ कि मुझे @babel/plugin-proposal-class-propertiesनिर्भरता याद आ रही थी ।

— ख्विलो

Answer 5

मेरे काम के माहौल में, .babrc फ़ाइल वहाँ नहीं थी। हालाँकि, package.json में प्रविष्टि के बाद समस्या हल हो गई।

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

नोट: npm या यार्न कमांड निष्पादित करने से पहले कंसोल से बाहर निकलें और फिर से खोलना न भूलें।

Answer 6

एक ही त्रुटि पर लगभग 3 घंटे की खोज और समय बिताने के बाद, मैंने पाया कि मैं प्रतिक्रिया के लिए नाम आयात का उपयोग कर रहा हूं:

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

पैकेज। 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"
  }
}

Comments

यह जवाब मुझे अप्रासंगिक लगता है। एक गलत आयात एक गलत आयात है, आप चाहे जितने प्लग इन का उपयोग कर रहे हों।

— मार्को फॉस्टिनेली

आपकी प्रतिक्रिया @MarcoFaustinelli के लिए धन्यवाद। एक गलत आयात इस त्रुटि के कारणों में से एक है। इतनी सरल और मौलिक समस्या लेकिन सभी के लिए हो सकती है। एक उत्तर एक समस्या का मार्गदर्शक है।

— मो हेमाती

अपवॉट नहीं किया गया क्योंकि यह मेरे लिए काम करता था, लेकिन क्योंकि इससे मुझे यह समझने में मदद मिली कि समस्या क्या थी - यह त्रुटि संदेश बहुत विशिष्ट नहीं है।

— प्रो क्यू

Answer 7

• प्लगइन-प्रस्ताव-वर्ग-गुण स्थापित करें npm install @babel/plugin-proposal-class-properties --save-dev

• अपडेट करके अपने webpack.config.js को अपडेट करें 'plugins': ['@babel/plugin-proposal-class-properties']}]

Comments

'प्लगइन्स' में कैसे जोड़ा जाए, इसके बारे में अधिक जानकारी के लिए, इस पृष्ठ को

— Pro Q

ऐसा करना मुझे एक त्रुटि दे रहा हैInvalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.plugins[1] should be one of these: object { apply, … } | function -> Plugin of type object or instanceof Function Details: * configuration.plugins[1] should be an object. -> Plugin instance * configuration.plugins[1] should be an instance of function -> Function acting as plugin

— प्रो क्यू

Answer 8

मुझे उस समस्या का पता चलता है जिसे मेरी .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',
  ],
};

और यह मेरे लिए रिएक्टिव नेटिव एप्लिकेशन पर काम करता है, मुझे लगता है कि इससे रिएक्ट ऐप्स को भी मदद मिलेगी।

Comments

module.exports = { "presets": ["module:metro-react-native-babel-preset"], "plugins": ["@babel/plugin-proposal-class-properties"] }मेरे लिए काफी था। क्या आप अपने उत्तर को अपडेट कर सकते हैं और हमें यह भी समझना चाहिए कि .babelrcनजरअंदाज क्यों किया गया था

— फैब्रीज़ियो बर्टोग्लियो

@FabrizioBertoglio Babel 7 अब स्वचालित रूप से लोड नहीं होता है। 7 में बैबेल, एक "रूट" निर्देशिका की अवधारणा है। प्रोजेक्ट-वाइडकोनफिगरेशन के लिए, बैबेल स्वचालित रूप से "babel.config.js" की खोज करेगा

— कुर्द

धन्यवाद .. babeljs.io/docs/en/config-files/#6x-vs-7x-babelrc-loading

— Fabrizio Bertoglio

Answer 9

मैंने अभी लारवेल फ्रेमवर्क 5.7.19 पर परीक्षण किया है और निम्नलिखित चरण काम करते हैं:

सुनिश्चित करें कि आपकी .babelrc फ़ाइल आपके एप्लिकेशन के रूट फ़ोल्डर में है, और निम्न कोड जोड़ें:

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

दौड़ो npm install --save-dev @babel/plugin-proposal-class-properties।

दौड़ो npm run watch।

Answer 10

मैं स्पष्ट रूप से बैबल पार्सर का उपयोग कर रहा हूं। उपरोक्त किसी भी समाधान ने मेरे लिए काम नहीं किया। यह काम किया।

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

Comments

मुझे यह कोड कहां जोड़ना चाहिए? और आप प्रतिक्रिया जे एस का उपयोग करें?

— मोहममद रेज़ा देहगानी

यह कोड है यदि आप एक babel प्लगइन विकसित कर रहे हैं। और हाँ, मेरा प्लगइन JSX के लिए है। github.com/Ghost---Shadow/i18nize-react

— सौरदीप नंदा

Answer 11

इस GitHub मुद्दे के अनुसार यदि आप क्रिएट-रिएक्शन-ऐप का उपयोग कर रहे हैं तो आपको अपने .babelrcया babel.config.jsकॉन्फ़िगरेशन को कॉपी करना चाहिए webpack.config.jsऔर उन को हटाना चाहिए। htis के दो लाइन कोड को 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'],
                .
                .
                .

Answer 12

चलती stateअंदर constructor functionमेरे लिए काम किया:

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

शुभ लाभ...

Answer 13

मैं यार्न का उपयोग कर रहा हूं। त्रुटि को दूर करने के लिए मुझे निम्नलिखित कार्य करने थे।

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

Answer 14

जोड़ा जा रहा है

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

में .babelrcमेरे लिए काम करता है।

Answer 15

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

या

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

Answer 16

यदि कोई एक प्रतिक्रिया-मूल-वेब-मोनोरेपो के बाद मोनोरेपो पर काम कर रहा है, तो आपको 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
};

Answer 17

मैंने उसी मुद्दे का सामना किया, जबकि कुछ जेएसएक्स को बेबल के साथ बदलने की कोशिश कर रहा था। नीचे समाधान है कि मेरे लिए काम किया है। आप अपने .babelrc में निम्न json जोड़ सकते हैं

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

Answer 18

मैंने src / घटकों -> ../../compenders के लिए एक सिम्लिंक बनाया, जिसके कारण npm startपागल हो गए और src / घटकों / * की व्याख्या करना बंद कर दिया। आधिकारिक कोलाहल से इसे ठीक करने के सभी निर्देश बेकार थे। जब मैंने घटक निर्देशिका को वापस कॉपी किया तो सब कुछ वापस सामान्य हो गया था!