IE11 中的 Webpack 中断 [英] Webpack breaking in IE11

问题描述

很难追查到这一点，所以感谢您对我的包容.一些用户抱怨我们的网站在 IE11 中被破坏.该应用正在使用 nextjs 3.0.1 和 webpack 2.7.0.

It's difficult to track this down, so thanks for bearing with me. Some users were complaining that our site was broken in IE11. The app is using nextjs 3.0.1 and webpack 2.7.0.

我想我有一个类似于 Angular RxJs 计时器在 IE11 上暂停.我从 IE11 中名为 webpack///webpack bootstrapxxxxxxxxxx(其中 x 是一些十六进制数字)的引用中收到错误.

I think I have an issue similar to Angular RxJs timer pausing on IE11. I'm getting an error from a reference called webpack///webpack bootstrapxxxxxxxxxx (where the x's are some numbers in hex) in IE11.

这是导致问题的函数:

// The require function
function __webpack_require__(moduleId) {

    // Check if module is in cache
    if(installedModules[moduleId]) {
        return installedModules[moduleId].exports;
    }
    // Create a new module (and put it into the cache)
    var module = installedModules[moduleId] = {
        i: moduleId,
        l: false,
        exports: {},
        hot: hotCreateModule(moduleId),
        parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),
        children: []
    };

    // Execute the module function
    var threw = true;
    try {
        modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
        threw = false;
    } finally {
        if(threw) delete installedModules[moduleId];
    }

    // Flag the module as loaded
    module.l = true;

    // Return the exports of the module
    return module.exports;
}

modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); 行抛出错误Unable to get property 'call' of undefined或空引用.

我想这是由于缺少 polyfill，所以我遵循了 https 的建议://github.com/zeit/next.js/issues/1254 并将其添加到 next.config.js(next 的 webpack 配置):

I imagine this is due to a missing polyfill, so I followed the advice at https://github.com/zeit/next.js/issues/1254 and added this to next.config.js (the webpack config for next):

const originalEntry = config.entry
config.entry = function () {
  return originalEntry()
    .then((entry) => {
      Object.keys(entry).forEach(k => {
        entry[k].unshift('babel-polyfill')
      })
      console.log(entry)

      return entry
    })
}

我仍然看到同样的错误.

I'm still seeing the same error.

有趣的是，我在 nextjs 应用程序的生产版本中遇到了不同的问题.它在 next 生成的 app.js 文件中很深，但错误似乎来自这一行 https://github.com/ianstormtaylor/heroku-logger/blob/master/src/index.js#L12:

One thing that's interesting is that I have a different issue in the production version of the nextjs app. It's deep in the app.js file generated by next, but the error seems to come from this line https://github.com/ianstormtaylor/heroku-logger/blob/master/src/index.js#L12:

const {
  LOG_LEVEL,
  NODE_ENV,
} = process.env

它正在抛出 预期的标识符.这是因为模块没有正确地从 ES6 转换到 ES5 吗?可能有一个潜在的问题(我在开发中看到)，而不是 heroku-logger 库的问题.

It's throwing Expected identifier. Is this because the module isn't getting transpiled from ES6 to ES5 correctly? There's probably an underlying issue (that I saw in development), rather than a problem with the heroku-logger library.

意识到这是一个复杂的问题，我可能遗漏了一些细节.提前感谢您的帮助！

Realize this is a complicated issue and I'm probably missing some details. Thanks in advance for your help!

推荐答案

万一其他人为此苦恼，我将 babel-polyfill 留在了 webpack 配置中并更改了 build 命令:

In case anyone else wrestled with this, I left the babel-polyfill in the webpack config and changed the build command to:

next build && babel .next/*.js --out-dir . --presets=es2015,react

这很笨拙，因为一些代码是由 webpack 进行 babel 化的，然后又在输出目录中.希望有其他建议！

This is pretty clunky because some code is babel-ified by webpack and then again in the output directory. Would love other suggestions!

这篇关于IE11 中的 Webpack 中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！