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?


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


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.


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

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.


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.


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

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


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.


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


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.


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

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

4

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

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

Powodzenia...


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

3

Dodawanie

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

do .babelrcprac dla mnie.


2

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

lub

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


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

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

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

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

  1. Zamknij terminal i uruchom npm startponownie.

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!

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.