В Webpack не создается класс ES6, в котором отсутствует проблема конфигурации

Question

У меня проблема с добавлением веб-пакета в существующий проект React.Ранее проект отображался на стороне сервера с помощью next.js.Однако, похоже, что-то не так с моим конфигом webpack.Всякий раз, когда я пытаюсь построить свой проект, он терпит неудачу с, казалось бы, корректным кодом ES6:

ОШИБКА в ./src/components/shared/menu/component.js Сборка модуля не удалась: SyntaxError: Неожиданный токен (8:12)

   6 |
   7 | export default class Menu extends PureComponent {
>  8 |   propTypes = {
     |             ^
   9 |     items: PropTypes.arrayOf(PropTypes.shape({
  10 |       name: PropTypes.string.isRequired,
  11 |       action: PropTypes.func.isRequired,

Мой webpack.config.js

    const path = require('path');

module.exports = {
    entry: './src/pages/index/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { 
                test: /\.js?$/, 
                loader: 'babel-loader', 
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                  }           
            },
            {
                test: /\.scss$/,
                use: [ 
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS
                 ]
            }
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist")
    }
};

Мой .babelrc

{ "presets": ["es2015", "react"] }

Я уже пробовал поиск по SO и Google, но не могу найтикто-нибудь еще испытывает ту же проблему.Пожалуйста, порекомендуйте!Спасибо!

Answer 1

Используйте плагин babel polyfill и включите его в веб-пакет перед вашими точками входа, это означает, что у вас есть точка входа в виде массива, а первым элементом является babel-polyfill, а вторым элементом является ваш index.js

Выможет также потребовать или импортировать babel-polyfill в качестве первой строки index.js, но требуется только один раз - в веб-пакете или файле индекса.

Answer 2

1) run: npm install --save-dev babel-plugin-transform-class-properties

2) Обновите ваш .babelrc файл:

{ "presets": ["es2015", "react"], "plugins": ["transform-class-properties"] }

Таким образом, babel также преобразует свойства класса какуказанное в README: https://www.npmjs.com/package/babel-plugin-transform-class-properties

Кроме того, обязательно используйте ключевое слово static при определении propTypes внутри класса (чтобы оно было объявлено в самом классе, а не в его прототипе).)