TypeScript и Webpack 4, Сборка модуля завершилась неудачно: неожиданный токен, ожидается "," - PullRequest
Новая
       11

TypeScript и Webpack 4, Сборка модуля завершилась неудачно: неожиданный токен, ожидается ","

0 голосов
/ 04 февраля 2020

Я сразу предупрежу вас, я уже прочитал все подобные вопросы

Моя конфигурация babel в package.json: 

"babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "usage"
        }
      ],
      [
        "@babel/preset-react",
        {
          "useSpread": true,
          "development": true
        }
      ],
      [
        "@babel/preset-typescript",
        {
          "allExtensions": true
        }
      ]
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-object-rest-spread",
        {
          "loose": true,
          "useBuiltIns": true
        }
      ]
    ],
    "env": {
      "production": {
        "plugins": [
          "@babel/proposal-class-properties"
        ]
      }
    }

Моя конфигурация веб-пакета: 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = (env = {}) => {
    const {
        mode = 'development'
    } = env;

    const isProd = mode === 'production';
    const isDev = mode === 'development';

    const getStyleLoaders = () => {
        return [
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader'
        ];
    };

    const getPlugins = () => {
        const plugins = [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, 'server', 'templates', 'index.html')
            }),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    BROWSER: true,
                    API_ROOT: JSON.stringify(process.env.API_ROOT || '')
                }
            }),
        ];

        if (isProd) {
            plugins.push(new MiniCssExtractPlugin({
                filename: 'main-[hash:8].css'
            }));
        }

        return plugins;
    };

    return {
        entry: [
            path.resolve(__dirname, 'app', 'components', 'App.js')
        ],
        mode: isProd ? 'production' : isDev && 'development',
        output: {
            filename: 'main-[hash:5].js',
            path: path.resolve(__dirname, 'public', 'assets'),
        },

        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                // Loading CSS
                {
                    test: /\.(css)$/,
                    use: getStyleLoaders()
                },

                // Loading SASS/SCSS
                {
                    test: /\.(sss)$/,
                    use: [...getStyleLoaders(), 'sass-loader']
                },
            ]
        },
        plugins: getPlugins(),
        devServer: {
            hot: true,
            stats: {
                colors: true
            }
        }
    };
};

При попытке собрать сборку возникает следующая ошибка: 

ERROR in ./app/components/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/cpt/Desktop/novaya/dev/app/components/App.js: Unexpected token, expected "," (70:5)

  68 |          const ZoomInAndOut = ({ children, position, ...props }) => (
  69 |                  <Transition
> 70 |                    {...props}
     |                    ^
  71 |                    timeout={800}

Я не могу понять, что в моей конфигурации отсутствует. Я перепробовал несколько разных вариантов, везде эта ошибка. Я использую последние (в настоящее время 2020.04.02) версии всех npm пакетов

UPD: произошла новая ошибка: https://prnt.sc/qxf0pt

1 Ответ

0 голосов
/ 04 февраля 2020

Попробуйте изменить порядок preset вот так 

 "presets": [
      ["@babel/preset-env", {"useBuiltIns": "usage"}],
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],
...