Поддержка экспериментального синтаксиса classProperties в настоящее время не включена

117

Пока я настраивал React в проекте Django, я столкнулся с этой ошибкой

Ошибка ModuleBuildError в сборке модуля (из ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js: Поддержка экспериментального синтаксиса classProperties 'в настоящее время не включен (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-offer-class-properties и поместил это в 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"
  ]
}

Однако ошибка все еще существует, в чем проблема ??

reactjs webpack babeljs babel 1вс
источник
Вы не должны иметь / нуждаться в обоих @babel/plugin-proposal-class-propertiesи babel-plugin-transform-class-properties. Вы перестраиваете после установки, да?
SamVK 08
Какую версию Babel вы используете?
SamVK 08
поделитесь пакетом json
Sakhi Mansoor
Я отредактировал свой пакет json
1вск,
попробуйте запуститьnpx babel-upgrade --write --install
FDisk

Ответы:

83

+ Изменить

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

Чтобы

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

Это сработало для меня

Ашик Миранкутти
источник
17
npm i --save-dev @ babel / plugin-offer-class-properties
Абхай Широ,
1
Это не работает для меня. Я не
извлекаю
5
Ubuntu 18 - пришлось переименовать , .babelrcчтобы babel.config.jsи использовать module.exportкак stackoverflow.com/questions/53916434/... , как обсуждалось на GitHub github.com/babel/babel/issues/7879#issuecomment-419732313
Fabrizio Bertoglio
2
Test suite failed to run; .loose is not a valid Plugin property
Дэвид
47

Сначала установите: @ babel / plugin-offer-class-properties как dev dependencty:

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 .

Обратите внимание, что вам следует перезапустить сервер разработки веб-пакетов, чтобы изменения вступили в силу.

Раз
источник
2
это работает для меня, спасибо. Думаю, это решение для Babel 7.0+
Black Hole
45

Решение для проекта webpack

Я просто решил эту проблему, добавив @babel/plugin-proposal-class-propertiesв конфигурацию webpack плагин. Раздел моих модулей 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']}]
            }
        }
    ]
}
Fangming
источник
3
Это должно быть правильным ответом при использовании webpack, так как иметь много файлов конфигурации (например, webpack.config.js, package.json и .babelrc) нехорошо - github.com/babel/babel/issues/8655# issuecomment-419795548
Miro J.
работал у меня отлично - был озадачен этим в течение нескольких дней ... большое спасибо.
samuelsaumanchan
37 
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
}

замените файл .babelrc приведенным выше кодом. это устранило проблему для меня.

Аун Али
источник
Если вы удалили приложение create-response-app, измените любую конфигурацию в 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зависимости.
khwilo
12

В моем корне рабочей среды файла .babelrc не было. Однако следующая запись в package.json решила проблему.

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

Примечание. Не забудьте выйти из консоли и снова открыть ее перед выполнением команд npm или yarn.

Сахана
источник
6

После почти 3 часов поиска и потраченного времени на ту же ошибку я обнаружил, что использую импорт имени для React: 

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

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"
  }
}
Мо Хемати
источник
Мне этот ответ кажется неуместным. Неправильный импорт - это неправильный импорт, независимо от того, какие плагины вы используете.
Марко Фаустинелли
спасибо за отзыв @MarcoFaustinelli. Неправильный импорт - одна из причин этой ошибки. Такая простая и фундаментальная проблема, но может случиться с каждым. Ответ - это руководство к проблеме.
Мо Хемати
Проголосовали не потому, что это сработало для меня, а потому, что это помогло мне понять, в чем проблема - это сообщение об ошибке не очень конкретное.
Pro Q
6

  • Установите плагин-предложение-класс-свойства npm install @babel/plugin-proposal-class-properties --save-dev

  • Обновите свой webpack.config.js, добавив 'plugins': ['@babel/plugin-proposal-class-properties']}]

Имран
источник
Для получения дополнительной информации о том, как добавлять «плагины», см. Эту страницу
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
Pro Q
5

Я обнаружил, что проблема моя .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',
  ],
};

И это работает для меня в приложении React Native, я думаю, что это также поможет приложениям React.

Хусам Курд
источник
1
module.exports = { "presets": ["module:metro-react-native-babel-preset"], "plugins": ["@babel/plugin-proposal-class-properties"] }мне хватило. Можете ли вы обновить свой ответ, и мы также должны понять, почему .babelrcбыл проигнорирован
Фабрицио Бертольо
@FabrizioBertoglio Babel 7 больше не загружает автоматически .babelrc. Новым в Babel версии 7 является концепция «корневого» каталога. Для конфигурации всего проекта Babel будет автоматически искать «babel.config.js»
Хусам Курд
1
спасибо .. babeljs.io/docs/en/config-files/#6x-vs-7x-babelrc-loading
Fabrizio
5

Я только что тестировал Laravel Framework 5.7.19, и следующие шаги работают:

Убедитесь, что ваш файл .babelrc находится в корневой папке вашего приложения, и добавьте следующий код:

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

Беги npm install --save-dev @babel/plugin-proposal-class-properties.

Беги npm run watch.

مهدی عابدی برنامه نویس و مشاور
источник
4

Я использую синтаксический анализатор babel явно. Ни одно из вышеперечисленных решений не помогло мне. Это сработало.

const ast = parser.parse(inputCode, {
      sourceType: 'module',
      plugins: [
        'jsx',
        'classProperties', // '@babel/plugin-proposal-class-properties',
      ],
    });
Сурадип Нанда
источник
куда мне добавить этот код? а вы используете React js?
MoHammaD ReZa DehGhani
1
Этот код предназначен для разработки плагина babel. И да, мой плагин для JSX. github.com/Ghost---Shadow/i18nize-react
Souradeep Nanda
4

В соответствии с этой проблемой GitHub, если вы используете приложение create-response-app, вы должны скопировать свои .babelrcили babel.config.jsконфигурации webpack.config.jsи удалить их. Из-за того, что две строки кода, 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'],
                .
                .
                .
Зея Соруш
источник
4

Перемещение stateвнутри constructor functionсработало для меня:

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

Удачи...

Акаши
источник
3

Я использую пряжу. Чтобы преодолеть ошибку, мне пришлось сделать следующее.

yarn add @babel/plugin-proposal-class-properties --dev
Сильвестр
источник
3

Добавление 

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

в .babelrcработу для меня.

Чинтан Бхут
источник
2

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

или

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

Немецкий
источник
1

Если кто-то работает над monorepo после response -native-web-monorepo, вам нужно 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
};
Васи Садман
источник
1

Я столкнулся с той же проблемой при попытке перенести какой-то jsx с помощью babel. Ниже приведено решение, которое сработало для меня. Вы можете добавить следующий json в свой .babelrc

{
  "presets": [
    [
      "@babel/preset-react",
      { "targets": { "browsers": ["last 3 versions", "safari >= 6"] } }
    ]
  ],
  "plugins": [["@babel/plugin-proposal-class-properties"]]
}
Hamfri
источник
1

Для проектов React с webpack:

  1. Сделайте: npm install @ babel / plugin-offer-class-properties --save-dev
  2. Создать .babelrc(если нет) файл в корневой папке , где package.jsonи webpack.config.jsприсутствуют и добавьте ниже кода , что:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}
Развернуть фрагмент

  1. Добавьте в webpack.config.jsфайл код ниже :

{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ["@babel/preset-env", "@babel/preset-react"]
            },
            resolve: {
                extensions: ['.js', '.jsx']
            }
}
Развернуть фрагмент

  1. Закройте терминал и npm startснова запустите .
Абхишек Гупта
источник
0

Я создал символическую ссылку для src / components -> ../../components, которая заставила npm startсходить с ума и перестать интерпретировать src / components / *. Js как jsx, что привело к той же ошибке. Все инструкции по исправлению из официального babel оказались бесполезными. Когда я скопировал обратно каталог компонентов, все было НАЗАД НА НОРМАЛЬНОЕ!

Мартин
источник