পরীক্ষামূলক বাক্য গঠনের জন্য সমর্থন 'শ্রেণিপ্রোপার্টিস' বর্তমানে সক্ষম নয়

Question

আমি জ্যাঙ্গো প্রকল্পের মধ্যে প্রতিক্রিয়া স্থাপন করার সময় আমি এই ত্রুটিটি পেলাম

মডিউল বিল্ডে মডিউল বিল্ডআরআর ব্যর্থ হয়েছে (। 'বর্তমানে সক্ষম নয় (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.

সুতরাং, আমি @ বাবেল / প্লাগইন-প্রস্তাব-শ্রেণি-বৈশিষ্ট্যগুলি ইনস্টল করেছি এবং এটি বাবেলরসিআর-এ রেখেছি

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। আপনি ইনস্টলের পরে পুনর্নির্মাণ করছেন, হ্যাঁ?

— SamVK

আপনি বাবেলের কোন সংস্করণটি চালাচ্ছেন?

— SamVK

আপনি প্যাকেজ ভাগ করুন json

— সখী মনসুর

আমি আমার প্যাকেজ json সম্পাদনা করেছি

— সান

দৌড়ানোর চেষ্টা করুনnpx babel-upgrade --write --install

— এফডিস্ক

Answer 1

পরিবর্তন

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

প্রতি

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

এটি আমার পক্ষে কাজ করেছে

Comments

এনপিএম আমি --save-dev @ বাবেল / প্লাগইন-প্রস্তাব-শ্রেণি-সম্পত্তি

— অভয় শিরো

এই আমার জন্য কাজ করে না। আমি প্রতিক্রিয়া অ্যাপটি বের করছি না

— সুপ্রিয়া কালঘাটগি

উবুন্টু 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

ওয়েবপ্যাকটি ব্যবহার করার সময় এটির যথাযথ উত্তর হওয়া উচিত, কারণ অনেকগুলি কনফিগারেশন ফাইল (যেমন ওয়েবপ্যাক.কনফিগ.জেএস, প্যাকেজ.জসন এবং .babelrc) রাখা ভাল নয় - github.com/babel/babel/issues/8655# ইস্যুয়েকমেন্ট -১১৯7৯৫৫৪৮

— মিরো জে

Answer 3

প্রথমে: ডিভ নির্ভরশীল হিসাবে @ বাবেল / প্লাগইন-প্রস্তাব-শ্রেণি-বৈশিষ্ট্যগুলি ইনস্টল করুন :

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

তারপরে আপনার .babelrc সম্পাদনা করুন যাতে এটি ঠিক এর মতো হবে:

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

.babelrc ফাইলটি মূল ডিরেক্টরিতে অবস্থিত, যেখানে প্যাকেজ.জসন রয়েছে।

নোট করুন যে পরিবর্তনগুলি প্রভাবিত হতে আপনার ওয়েবপ্যাক ডেভ সার্ভারটি পুনরায় শুরু করা উচিত।

Comments

এই আমার জন্য কাজ করে, ধন্যবাদ। আমি মনে করি বাবেল 7.0+ এর সমাধান

— ব্ল্যাক হোল

এটি আমার জন্য কাজ করেছে।

— ভীমশঙ্কর সুতার

Answer 4

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

উপরের কোড সহ আপনার .babelrc ফাইলটি প্রতিস্থাপন করুন। এটা আমার জন্য সমস্যা স্থির।

Comments

আপনি যদি তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশনটি বের করে রেখেছেন তবে এই কনফিগারেশনের সাহায্যে ওয়েবপ্যাক.কনফিগ.ডেমো এবং প্যাকেজ.জসনে কোনও কনফিগার পরিবর্তন করুন। এর অর্থ চলমানnpm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

— ফ্রান্সিসকো হজ

এটি ছিল সোজা-এগিয়ে। এটি ঘটেছে যে আমি @babel/plugin-proposal-class-propertiesনির্ভরতা অনুপস্থিত ।

— খভিলো

Answer 5

আমার কাজের পরিবেশে মূল .babelrc ফাইলটি ছিল না। তবে প্যাকেজ.জসনে প্রবেশের পরে সমস্যাটি সমাধান হয়েছে।

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

দ্রষ্টব্য: এনপিএম বা সুতার কমান্ডগুলি কার্যকর করার আগে কনসোলটি থেকে বের হয়ে আবার খুলতে ভুলবেন না।

Answer 6

প্রায় 3 ঘন্টা অনুসন্ধান এবং একই ত্রুটিতে সময় ব্যয় করার পরে, আমি দেখতে পেলাম যে আমি প্রতিক্রিয়াটির জন্য নাম আমদানি ব্যবহার করছি:

import { React } from 'react';

যা সম্পূর্ণ ভুল। কেবল এটিকে স্যুইচ করে:

import React from 'react';

সমস্ত ত্রুটি চলে গেছে। আমি আশা করি এটা কারো সাহায্যে লাগবে. এটি আমার .belrc:

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

Comments

এই উত্তরটি আমার কাছে অপ্রাসঙ্গিক বলে মনে হচ্ছে। আপনি যে কোনও প্লাগইন ব্যবহার করছেন না কেন একটি ভুল আমদানি একটি ভুল আমদানি।

— মার্কো ফাউস্টিনেল্লি

আপনার প্রতিক্রিয়াটির জন্য ধন্যবাদ @ মার্কো ফাউস্টাইনলি। একটি ভুল আমদানি এই ত্রুটির অন্যতম কারণ। এত সহজ এবং মৌলিক সমস্যা তবে সবার ক্ষেত্রেই ঘটতে পারে। একটি উত্তর একটি সমস্যা গাইড।

— মো হেমতি

এটি আমার জন্য কাজ করেছিল বলে উপভোগ করা হয়নি, তবে সমস্যাটি কী তা বুঝতে আমাকে সহায়তা করেছে - এই ত্রুটি বার্তাটি খুব নির্দিষ্ট নয়।

— প্রো প্রশ্ন

Answer 7

• প্লাগ-প্রস্তাব-শ্রেণি-বৈশিষ্ট্যগুলি ইনস্টল করুন npm install @babel/plugin-proposal-class-properties --save-dev

• যোগ করে আপনার ওয়েবপ্যাক.কনফিগ.জেগুলি আপডেট করুন 'plugins': ['@babel/plugin-proposal-class-properties']}]

Comments

'প্লাগইনস' এ কীভাবে যুক্ত করা যায় সে সম্পর্কে আরও তথ্যের জন্য এই পৃষ্ঠাটি দেখুন

— প্রো প্রশ্ন

এটি করা আমাকে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উপেক্ষা করা হয়েছে তা আমাদের বুঝতে হবে

— ফ্যাবরিজিও বার্তোগলিও

@ ফ্যাবরিজিও বেরটোগ্লিও বাবেল 7 আর স্বয়ংক্রিয়ভাবে লোড হয় না। "বাবেলে নতুন", এটি একটি "মূল" ডিরেক্টরি ধারণা। প্রকল্প-প্রশস্তকরণের জন্য, বাবেল স্বয়ংক্রিয়ভাবে একটি "babel.config.js" অনুসন্ধান করবে

— হুসাম কুর্দি

ধন্যবাদ .. babeljs.io/docs/en/config-files/#6x-vs-7x-babelrc-loading

— Fabrizio

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

আমি এই কোডটি কোথায় যুক্ত করব? এবং আপনি প্রতিক্রিয়া জেএস ব্যবহার?

— মোহাম্মাদ রেজা দেহগনি

এই কোডটি হ'ল যদি আপনি বাবেল প্লাগইন বিকাশ করছেন। এবং হ্যাঁ, আমার প্লাগইনটি জেএসএক্সের জন্য। github.com/Ghost--- শ্যাডো

— i18nize-

Answer 11

এই গিটহাব ইস্যু অনুসারে আপনি যদি তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করেন তবে আপনার .babelrcবা babel.config.jsকনফিগারেশনগুলি অনুলিপি করে webpack.config.jsসেইগুলিতে মুছে ফেলা উচিত bab কারণ এই দুটি লাইনের কোডটি babelrc: false,configFile: false,আপনার বাফলার্কে কনফিগার করেছেন, .. অকেজো। এবং আপনার 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.jspackages/webresolveApp('../../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

আমি এসসিআর / উপাদানগুলির জন্য একটি সিমলিংক তৈরি করেছি -> ../../ উপাদানগুলি যে npm startবাদামে গিয়েছিল এবং এসসিআর / উপাদান / * .এসএসকে জেএসএক্স হিসাবে ব্যাখ্যা করতে থামিয়েছে, সুতরাং সেই একই ত্রুটি দেয়। সরকারী বাবেল থেকে এটি ঠিক করার জন্য সমস্ত নির্দেশাবলী অকেজো। আমি যখন উপাদানগুলির ডিরেক্টরিটি অনুলিপি করেছিলাম তখন সবকিছুই স্বাভাবিকভাবে ফিরে আসে!

Answer 18

বাবেলের সাথে কিছু জেএসএক্স স্থানান্তর করার চেষ্টা করার সময় আমি একই সমস্যার মুখোমুখি হয়েছি। নীচে আমার জন্য কাজ করা সমাধানটি দেওয়া হল। আপনি আপনার .babelrc এ নিম্নলিখিত জেসন যুক্ত করতে পারেন

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