2

我的应用程序可以在其他浏览器上运行，但不能（在 v44 上）如果我删除延迟加载，它可以正常工作。

我正在使用React.lazy并Suspense拆分我的代码。

  • 通天塔 7.5.0
  • 网络包 4.28.3
  • 反应 16.7.0

尝试过搞乱 webpack 和 babel 配置。似乎错误是由 eval 中的以下代码引发的。我认为这是杀死它的传播语法。但是，我不知道如何让 babel 将其转换为 es5 作为其 webpack 代码本身。



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

预期：像其他浏览器一样在边缘工作

实际：一旦你碰到触发延迟加载的东西就会死亡

4

2 回答 2

0

这对我有用。我在 Edge v44 中加载反应应用程序时遇到了同样的问题，错误代码相同。我的开发模式浏览器列​​表不包括 IE。

  1. 更新 package.json 中的浏览器列表

{
  ...
  "browserslist": {
    "production": [
      ...
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 1 ie version" // <- make sure this is present
    ]
  },
  ...
}

  1. 删除 node_modules 中的 .cache 文件夹
  2. 重新运行开发服务器
于 2021-02-03T14:50:27.983 回答
0

我更正了 webpack 配置更改的类似问题。

我们以您描述的方式使用延迟加载，我几乎遇到了这个确切的问题。多亏了这个问题，我在evalEdge 拒绝的地方找到了一个扩展运算符。就我而言，这是由于我们使用了react-svg-loader.

我们试图引入一个像这样的 JSX 的 svg：， import Image1 from 'react-svg-loader!./image1.svg';它在 Edge 上失败并出现类似的错误。

转换为使用加载器作为我们的 webpack 配置的一部分更正了这个问题：

// 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';
于 2019-10-16T16:54:53.173 回答