Obsługa eksperymentalnej składni „classProperties” nie jest obecnie włączona

117

Podczas konfigurowania Reacta w projekcie Django natknąłem się na ten błąd

ModuleBuildError in Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ asset \ js \ index.js: Wsparcie dla eksperymentalnej składni 'classProperties 'nie jest obecnie włączona (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.

Więc zainstalowałem @ babel / plugin-offer-class-properties i umieściłem to w 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"
  ]
}

Jednak błąd nadal istnieje, na czym polega problem?

reactjs webpack babeljs babel 1Ndz
źródło
Nie powinieneś mieć / potrzebować obu @babel/plugin-proposal-class-propertiesi babel-plugin-transform-class-properties. Odbudowujesz po instalacji, tak?
SamVK
Jakiej wersji Babel używasz?
SamVK,
udostępnij pakiet json
Sakhi Mansoor
Edytowałem pakiet json
niedz
spróbuj uruchomićnpx babel-upgrade --write --install
FDisk

Odpowiedzi:

83

Zmiana

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

Do

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

To zadziałało dla mnie

Ashik Meerankutty
źródło
17
npm i --save-dev @ babel / plugin-offer-class-properties
Abhay Shiro
1
To nie działa dla mnie. Nie
wyrzucam
5
Ubuntu 18 - Musiałem zmienić nazwę .babelrc, aby babel.config.jsi wykorzystanie module.exportjak stackoverflow.com/questions/53916434/... jak omówiono na 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,
47

Najpierw zainstaluj: @ babel / plugin-offer-class-properties jako dev dependencty:

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

Następnie edytuj plik .babelrc, aby wyglądał dokładnie tak:

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

Plik .babelrc znajduje się w katalogu głównym, w którym znajduje się pakiet.json .

Zauważ, że powinieneś ponownie uruchomić serwer deweloperski webpacka, aby zmiany zostały wprowadzone.

Raz
źródło
2
ten działa dla mnie, dzięki. Myślę, że to rozwiązanie dla babel 7.0+
Black Hole
45

Rozwiązanie dla projektu webpacka

Po prostu rozwiązuję ten problem, dodając @babel/plugin-proposal-class-propertieswtyczkę konfiguracyjną do webpacka. Sekcja modułu mojego webpack.config.jswygląda tak

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']}]
            }
        }
    ]
}
Fangming
źródło
3
To powinna być właściwa odpowiedź, gdy używasz webpacka, ponieważ nie jest dobrze mieć wiele plików konfiguracyjnych (takich jak webpack.config.js, package.json i .babelrc) - github.com/babel/babel/issues/8655# issuecomment-419795548
Miro J.
zadziałało dla mnie idealnie - byłem tym zdumiony przez wiele dni ... wielkie dzięki.
samuelsaumanchan
37 
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
}

zamień swój plik .babelrc na powyższy kod. rozwiązało problem za mnie.

Awn Ali
źródło
Jeśli wyrzuciłeś aplikację create-react-app, zmień dowolną konfigurację w webpack.config.demo i package.json za pomocą tej konfiguracji. Oznacza to bieganienpm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
Francisco Hodge
To było proste. Tak się złożyło, że brakowało mi @babel/plugin-proposal-class-propertieszależności.
khwilo
12

W katalogu głównym mojego środowiska pracy nie było pliku .babelrc. Jednak następujący wpis w package.json rozwiązał problem.

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

Uwaga: Nie zapomnij wyjść z konsoli i otworzyć ją ponownie przed wykonaniem poleceń npm lub yarn.

Sahana
źródło
6

Po prawie 3 godzinach poszukiwań i spędzenia czasu na tym samym błędzie stwierdziłem, że używam importu nazw dla Reacta: 

import { React } from 'react';

co jest całkowicie błędne. Wystarczy przełączyć go na:

import React from 'react';

wszystkie błędy zniknęły. Mam nadzieję, że to komuś pomoże. To jest mój .babelrc:

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

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

plik 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"
  }
}
Mo Hemati
źródło
Ta odpowiedź wydaje mi się nieistotna. Zły import to zły import, niezależnie od używanych wtyczek.
Marco Faustinelli
dzięki za twoją opinię @MarcoFaustinelli. Niewłaściwy import jest jedną z przyczyn tego błędu. Tak prosty i fundamentalny problem, ale może się zdarzyć każdemu. Odpowiedź jest wskazówką do problemu.
Mo Hemati
Głosowałem za nie dlatego, że zadziałało dla mnie, ale dlatego, że pomogło mi zrozumieć, na czym polega problem - ten komunikat o błędzie nie jest bardzo szczegółowy.
Pro Q
6

  • Zainstaluj właściwości klasy-propozycji wtyczki npm install @babel/plugin-proposal-class-properties --save-dev

  • Zaktualizuj plik webpack.config.js, dodając 'plugins': ['@babel/plugin-proposal-class-properties']}]

Imran
źródło
Aby uzyskać więcej informacji na temat dodawania „wtyczek”, zobacz tę stronę
Pro Q
Robiąc to, otrzymuję błąd podobny doInvalid 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

Uważam, że problem .babelrczostał zignorowany, jednak tworzę babel.config.jsi dodaję:

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

I to działa dla mnie w aplikacji React Native, myślę, że pomogłoby to również aplikacjom React.

Hussam Kurd
źródło
1
module.exports = { "presets": ["module:metro-react-native-babel-preset"], "plugins": ["@babel/plugin-proposal-class-properties"] }wystarczyło mi. Czy możesz zaktualizować swoją odpowiedź, a także powinniśmy zrozumieć, dlaczego .babelrczostała zignorowana
Fabrizio Bertoglio
@FabrizioBertoglio Babel 7 nie wczytuje już automatycznie pliku .babelrc. Nowością w Babel w wersji 7 jest koncepcja katalogu „root”. W przypadku konfiguracji obejmującej projekt, Babel automatycznie wyszuka plik „babel.config.js”
Hussam Kurd
1
dzięki .. babeljs.io/docs/en/config-files/#6x-vs-7x-babelrc-loading
Fabrizio Bertoglio
5

Właśnie przetestowałem na Laravel Framework 5.7.19 i następujące kroki działają:

Upewnij się, że plik .babelrc znajduje się w folderze głównym aplikacji i dodaj następujący kod:

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

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

Biegnij npm run watch.

مهدی عابدی برنامه نویس و مشاور
źródło
4

Jawnie używam parsera Babel. Żadne z powyższych rozwiązań nie zadziałało. To zadziałało.

const ast = parser.parse(inputCode, {
      sourceType: 'module',
      plugins: [
        'jsx',
        'classProperties', // '@babel/plugin-proposal-class-properties',
      ],
    });
Souradeep Nanda
źródło
gdzie mam dodać ten kod? a używasz reakcji js?
MohammaD ReZa DehGhani
1
Ten kod jest używany podczas tworzenia wtyczki babel. I tak, moja wtyczka jest przeznaczona dla JSX. github.com/Ghost---Shadow/i18nize-react
Souradeep Nanda
4

Zgodnie z tym problemem z GitHubem, jeśli używasz aplikacji create-react-app, powinieneś skopiować swoje konfiguracje .babelrclub babel.config.jsdo nich webpack.config.jsi je usunąć. Ponieważ są to dwie linie kodu, babelrc: false,configFile: false,twoja konfiguracja w babelrc, ... jest bezużyteczna. a twój webpack.config.jsjest w twoim ./node_madules/react-scripts/configfolderze rozwiązałem mój problem w ten sposób:

{
              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'],
                .
                .
                .
zeia soroush
źródło
4

Przeniesienie statewnętrza constructor functionzadziałało dla mnie:

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

Powodzenia...

Akash
źródło
3

Używam przędzy. Musiałem wykonać następujące czynności, aby przezwyciężyć błąd.

yarn add @babel/plugin-proposal-class-properties --dev
Sylvester
źródło
3

Dodawanie 

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

do .babelrcprac dla mnie.

chintan bhut
źródło
2

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

lub

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

Niemiec
źródło
1

Jeśli ktoś pracuje nad monorepo, śledzi reakcję-native-web-monorepo , musisz to config-overrides.jszgłosić packages/web. musisz dodać resolveApp('../../node_modules/react-native-ratings'),w tym pliku ...

Mój kompletny config-override.jsplik to

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
};
Wasi Sadman
źródło
1

Napotkałem ten sam problem podczas próby transpozycji niektórych plików jsx za pomocą babel. Poniżej znajduje się rozwiązanie, które działało dla mnie. Możesz dodać następujący plik json do swojego pliku .babelrc

{
  "presets": [
    [
      "@babel/preset-react",
      { "targets": { "browsers": ["last 3 versions", "safari >= 6"] } }
    ]
  ],
  "plugins": [["@babel/plugin-proposal-class-properties"]]
}
Hamfri
źródło
1

Dla projektów React z pakietem internetowym:

  1. Do: npm install @ babel / plugin-offer-class-properties --save-dev
  2. Tworzenie .babelrc(jeśli nie istnieje) plik w folderze głównym, gdzie package.jsoni webpack.config.jssą obecne i dodać do tego kodu poniżej:

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

  1. Dodaj poniższy kod do webpack.config.jspliku:

{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ["@babel/preset-env", "@babel/preset-react"]
            },
            resolve: {
                extensions: ['.js', '.jsx']
            }
}
Rozwiń fragment

  1. Zamknij terminal i uruchom npm startponownie.
Abhishek Gupta
źródło
0

Utworzyłem dowiązanie symboliczne dla src / components -> ../../components, które spowodowało npm startzwariowanie i zaprzestanie interpretowania src / components / *. Js jako jsx, dając w ten sposób ten sam błąd. Wszystkie instrukcje dotyczące naprawy z oficjalnej babel były bezużyteczne. Kiedy skopiowałem z powrotem katalog komponentów, wszystko wróciło do normy!

jaskółka oknówka
źródło