Dukungan untuk sintaks eksperimental 'classProperties' saat ini tidak diaktifkan


117

Ketika saya menyiapkan React dalam proyek Django saya menemukan kesalahan ini

ModuleBuildError dalam Pembuatan modul gagal (dari ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js: Dukungan untuk sintaks eksperimental 'classProperties 'saat ini tidak diaktifkan (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.

Jadi, saya menginstal @ babel / plugin-proposal-class-properties dan meletakkannya di 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"
  ]
}

Namun kesalahan masih ada, Apa masalahnya ??


Anda seharusnya tidak memiliki / membutuhkan keduanya @babel/plugin-proposal-class-propertiesdan babel-plugin-transform-class-properties. Anda membangun kembali setelah menginstal, ya?
SamVK

Versi babel apa yang Anda jalankan?
SamVK

bagikan paket Anda json
Sakhi Mansoor

Saya mengedit paket saya json
1Sun

coba jalankannpx babel-upgrade --write --install
FDisk

Jawaban:


82

Perubahan

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

Untuk

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

Ini berhasil untuk saya


17
npm i --save-dev @ babel / plugin-proposal-class-properties
Abhay Shiro

1
Ini tidak bekerja untukku. Saya tidak mengeluarkan aplikasi react
Supriya Kalghatgi

4
Ubuntu 18 - Saya harus mengubah nama .babelrcuntuk babel.config.jsdan digunakan module.exportseperti stackoverflow.com/questions/53916434/... seperti yang dibahas di github github.com/babel/babel/issues/7879#issuecomment-419732313
Fabrizio Bertoglio

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

44

Solusi untuk proyek webpack

Saya baru saja menyelesaikan masalah ini dengan menambahkan @babel/plugin-proposal-class-propertiesplugin config webpack. Bagian modul saya webpack.config.jsterlihat seperti ini

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

3
Ini harus menjadi jawaban yang tepat ketika Anda menggunakan webpack, karena tidak baik memiliki banyak file konfigurasi (seperti webpack.config.js, package.json, dan .babelrc) - github.com/babel/babel/issues/8655# Issuecomment-419795548
Miro J.

bekerja untuk saya dengan sempurna - bingung tentang ini selama berhari-hari ... terima kasih banyak.
samuelsaumanchan

43

Pertama instal: @ babel / plugin-proposal-class-properties sebagai dependencty dev:

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

Kemudian edit .babelrc Anda sehingga menjadi persis seperti ini:

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

File .babelrc terletak di direktori root, di mana package.json berada.

Perhatikan bahwa Anda harus memulai ulang server dev webpack Anda agar perubahan berpengaruh.


2
yang satu ini berhasil untuk saya, terima kasih. Saya pikir adalah solusi untuk babel 7.0+
Lubang Hitam

1
ini berhasil untuk saya.
Bhimashankar Sutar

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

ganti file .babelrc Anda dengan kode di atas. itu memperbaiki masalah untuk saya.


Jika Anda telah mengeluarkan create-react-app, ubah konfigurasi apa pun di webpack.config.demo dan package.json dengan konfigurasi ini. Ini berarti berlarinpm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
Francisco Hodge

Ini lurus ke depan. Kebetulan saya kehilangan @babel/plugin-proposal-class-propertiesketergantungan.
khwilo

11

Di root lingkungan kerja saya, file .babelrc tidak ada. Namun, mengikuti entri di package.json memecahkan masalah.

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

Catatan: Jangan lupa untuk keluar dari konsol dan buka kembali sebelum menjalankan perintah npm atau benang.


6

Setelah hampir 3 jam mencari dan menghabiskan waktu untuk kesalahan yang sama, saya menemukan bahwa saya menggunakan impor nama untuk React:

import { React } from 'react';

yang benar-benar salah. Hanya dengan mengalihkannya ke:

import React from 'react';

semua kesalahan hilang. Saya harap ini membantu seseorang. Ini adalah .babelrc saya:

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

Jawaban ini tampak tidak relevan bagi saya. Impor yang salah adalah impor yang salah, terlepas dari plugin yang Anda gunakan.
Marco Faustinelli

terima kasih atas tanggapan Anda @MarcoFaustinelli. Impor yang salah adalah salah satu alasan kesalahan ini. Begitu sederhana dan masalah mendasar tetapi bisa terjadi pada semua orang. Jawabannya adalah panduan untuk suatu masalah.
Mo Hemati

Suara positif bukan karena berhasil untuk saya, tetapi karena ini membantu saya memahami apa masalahnya - pesan kesalahan ini tidak terlalu spesifik.
Pro Q

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

  • Perbarui webpack.config.js Anda dengan menambahkan 'plugins': ['@babel/plugin-proposal-class-properties']}]


Untuk informasi lebih lanjut tentang cara menambahkan 'plugin', lihat halaman ini
Pro Q

Melakukan ini memberi saya kesalahan di sepanjang barisInvalid 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
Pro Q

5

Saya menemukan masalah yang saya .babelrcabaikan, Namun saya membuat babel.config.jsdan menambahkan yang berikut ini:

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

Dan ini berfungsi untuk saya pada aplikasi React Native, saya rasa ini juga akan membantu aplikasi React juga.


1
module.exports = { "presets": ["module:metro-react-native-babel-preset"], "plugins": ["@babel/plugin-proposal-class-properties"] }sudah cukup bagiku. Bisakah Anda memperbarui jawaban Anda dan kami juga harus memahami mengapa .babelrcdiabaikan
Fabrizio Bertoglio

@FabrizioBertoglio Babel 7 tidak lagi otomatis memuat .babelrc. Yang baru di Babel di 7, adalah konsep direktori "root". Untuk project-wideconfiguration, Babel secara otomatis akan mencari "babel.config.js"
Hussam Kurd


5

Saya baru saja menguji Laravel Framework 5.7.19 dan langkah-langkah berikut berfungsi:

Pastikan file .babelrc Anda ada di folder root aplikasi Anda, dan tambahkan kode berikut:

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

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

Lari npm run watch.


4

Saya menggunakan pengurai babel secara eksplisit. Tidak ada solusi di atas yang berhasil untuk saya. Ini berhasil.

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

di mana saya harus menambahkan kode ini? dan Anda menggunakan react js?
MoHammaD ReZa DehGhani

1
Kode ini digunakan jika Anda mengembangkan plugin babel. Dan ya, plugin saya untuk JSX. github.com/Ghost---Shadow/i18nize-react
Souradeep Nanda

4

Menurut masalah GitHub ini jika Anda menggunakan create-react-app, Anda harus menyalin konfigurasi .babelrcatau Anda babel.config.jske webpack.config.jsdan menghapusnya. Karena dua baris kode htis babelrc: false,configFile: false,konfigurasi Anda di babelrc, .. tidak berguna. dan Anda webpack.config.jsada di ./node_madules/react-scripts/configfolder Anda, saya memecahkan masalah saya seperti ini:

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

4

Memindahkan bagian statedalam constructor functionberhasil untuk saya:

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

Semoga berhasil...


3

Saya menggunakan benang. Saya harus melakukan hal berikut untuk mengatasi kesalahan tersebut.

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

3

Menambahkan

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

menjadi .babelrckarya untuk saya.


2

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

atau

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


1

Jika seseorang bekerja pada monorepo berikut bereaksi-native-web-monorepo dari yang Anda butuhkan untuk config-overrides.jsfile dalam packages/web. Anda perlu menambahkanresolveApp('../../node_modules/react-native-ratings'), file itu ...

config-override.jsFile lengkap saya adalah

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

1

Saya menghadapi masalah yang sama ketika mencoba untuk memindahkan beberapa jsx dengan babel. Di bawah ini adalah solusi yang berhasil untuk saya. Anda dapat menambahkan json berikut ke .babelrc Anda

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

0

Saya membuat symlink untuk src / komponen -> ../../components yang menyebabkan npm startmenjadi gila dan berhenti menafsirkan src / komponen / *. Js sebagai jsx, sehingga memberikan kesalahan yang sama. Semua instruksi untuk memperbaikinya dari babel resmi tidak berguna. Ketika saya menyalin kembali direktori komponen semuanya BACK TO NORMAL!

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.