使用反应延迟加载时在 Edge 上出现 SCRIPT1028 错误

Posted

技术标签:

【中文标题】使用反应延迟加载时在 Edge 上出现 SCRIPT1028 错误【英文标题】:Getting SCRIPT1028 error on Edge when using react lazy loading 【发布时间】:2019-12-12 19:54:12 【问题描述】:

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

我正在使用React.lazySuspense 来拆分我的代码。

babel 7.5.0 webpack 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),
    ;


webpack 配置:

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

babel 配置

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

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

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

【问题讨论】:

在 v44 上的行为相同 你在这方面有什么收获吗?超级奇怪的问题 - 我刚刚开始遇到它。仅在 Microsoft Edge 上存在问题。 不@fredmoon - 老实说我放弃了 【参考方案1】:

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

我们按照您描述的方式使用延迟加载,我几乎遇到了这个确切的问题。由于这个问题,我在 Edge 拒绝的 eval 中找到了一个扩展运算符。就我而言,这是由于我们使用了react-svg-loader

我们试图将 svg 作为 JSX 引入,如下所示: 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';

【讨论】:

我认为我没有使用任何奇怪的加载程序(如您在上面看到的) - 您是如何追踪那个特定的 eval 的? 老实说 - 在我阅读了这个问题之后,我搜索了 ... 的转译包代码,发现它位于一个来自包装 svg 的代码的模块中。然后我查看了我们的源代码并意识到我们试图在运行时加载该 svg 与一堆其他转译的 JS,这对我来说似乎是错误的。由于 webpack 事先并不知道加载器,它可能只是指向库吐出的任何 gobbedlygook。【参考方案2】:

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

    更新 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
    ]
  ,
  ...
    删除 node_modules 中的 .cache 文件夹 重新运行开发服务器

【讨论】:

以上是关于使用反应延迟加载时在 Edge 上出现 SCRIPT1028 错误的主要内容,如果未能解决你的问题,请参考以下文章

如何延迟加载反应应用程序直到触发操作?

如何在页面加载时在反应打字稿中设置可见性

为函数而不是组件反应延迟加载

反应延迟加载外部amd模块

反应:呈现组件时在浏览器中获取运行时错误/警告

使用“?”时在反应路由中传递参数的问题并在其后放一些东西