Получение ошибки SCRIPT1028 на Edge при использовании реагирования на ленивую загрузку

Question

Мое приложение работает в других браузерах, но не работает (на v44). Если я удаляю отложенную загрузку, оно работает нормально.

Я использую React.lazy а также Suspense разделить мой код.

• Вавилон 7.5.0
• вебпак 4.28.3
• реагировать 16.7.0

Попробовал возиться с webpack и babel config. Кажется, ошибка генерируется следующим кодом, который находится внутри eval. Я думаю, что это синтаксис распространения, который убивает его. Тем не менее, я не знаю, как заставить babel переносить это в es5, так как это сам код веб-пакета.

function reduce(state = {}, action) {
    return {
        dirtyHandlerIds: Object(_dirtyHandlerIds__WEBPACK_IMPORTED_MODULE_3__["default"])(state.dirtyHandlerIds, {
            type: action.type,
            payload: {
                ...action.payload,
                prevTargetIds: Object(_utils_js_utils__WEBPACK_IMPORTED_MODULE_5__["get"])(state, 'dragOperation.targetIds', []),
            },
        }),
        dragOffset: Object(_dragOffset__WEBPACK_IMPORTED_MODULE_0__["default"])(state.dragOffset, action),
        refCount: Object(_refCount__WEBPACK_IMPORTED_MODULE_2__["default"])(state.refCount, action),
        dragOperation: Object(_dragOperation__WEBPACK_IMPORTED_MODULE_1__["default"])(state.dragOperation, action),
        stateId: Object(_stateId__WEBPACK_IMPORTED_MODULE_4__["default"])(state.stateId),
    };
}

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, '../build'),
        publicPath: '/',
        chunkFilename: '[name].bundle.js',
        filename: 'bundle.js'
    },
    optimization: {
        sideEffects: true
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader'] // loads js
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: ['ts-loader'] // loads ts
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] // handles css
            }
        ]
    },
    // gets it to bundle index.html
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve('./public/index.html')
        })
    ],
    // makes it able to resolve .jsx calls without explicit suffix
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    }
};

вавилонский конфиг

module.exports = {
    presets: [
        '@babel/preset-env',
        '@babel/react'
    ],
    plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-syntax-dynamic-import',
        [
            'import',
            {
                libraryName: 'antd',
                style: true
            }
        ]
    ],
    env: {
        test: {
            plugins: [
                'transform-es2015-modules-commonjs'
            ]
        }
    }
};

Ожидается: работает на грани, как и другие браузеры

На самом деле: умирает, как только вы нажмете что-то, что вызывает ленивую нагрузку

Answer 1

Я исправил аналогичную проблему изменением конфигурации веб-пакета.

Мы используем отложенную загрузку так, как вы описали, и я столкнулся почти с этой проблемой. Благодаря этому вопросу я нашел оператора распространения вevalЭдж отвергал. В моем случае это было связано с тем, что мы использовалиreact-svg-loader.

Мы пытались ввести svg как JSX вот так:import Image1 from 'react-svg-loader!./image1.svg';, который не работал на Edge с аналогичной ошибкой.

Переход на использование загрузчика как части конфигурации нашего веб-пакета устранил проблему:

// In your webpack config
{
  test: /\.svg$/,
  use: [
    {
      loader: "babel-loader"
    },
    {
      loader: "react-svg-loader",
      options: {
        jsx: true // true outputs JSX tags
      }
    }
  ]
}

// In your lazily loaded component
import Image1 from './image1.svg';

Answer 2

Это сработало для меня. У меня была такая же проблема с загрузкой реагирующего приложения в Edge v44 с тем же кодом ошибки. В моем списке браузеров режима разработки не было IE.

1. Обновите список браузеров в вашем package.json

2. Удалить папку .cache в node_modules
3. Перезапустите сервер разработки