Webpack打破了IE11

Question

很難追蹤到這一點，所以感謝與我的關系。 一些用戶抱怨我們的網站在IE11中被破壞了。 該應用程序使用nextjs 3.0.1和webpack 2.7.0。

在開發模式下調試

我想我有一個類似於IE11上的Angular RxJs計時器暫停的問題 。 我在IE11中從一個名為webpack /// webpack bootstrapxxxxxxxxxx（其中x是十六進制的數字）的引用中收到錯誤。

這是導致問題的功能：

// 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 or null reference 。

我想這是因為缺少polyfill，所以我按照https://github.com/zeit/next.js/issues/1254上的建議將其添加到next.config.js（下一個webpack配置）：

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
    })
}

我仍然看到同樣的錯誤。

生產中的其他細節

有趣的是，我在nextjs應用程序的生產版本中有一個不同的問題。 它深入下一個生成的app.js文件，但錯誤似乎來自這一行https://github.com/ianstormtaylor/heroku-logger/blob/master/src/index.js#L12 ：

const {
  LOG_LEVEL,
  NODE_ENV,
} = process.env

它正在拋出Expected identifier 。 這是因為模塊沒有正確地從ES6轉換為ES5嗎？ 可能存在一個潛在的問題（我在開發中看到），而不是heroku-logger庫的問題。

意識到這是一個復雜的問題，我可能錯過了一些細節。 在此先感謝您的幫助！

Answer 1

如果其他人與此搏斗，我將babel-polyfill polyfill留在webpack配置中並將build命令更改為：

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

這非常笨重，因為有些代碼是由webpack進行的，然后再次出現在輸出目錄中。 會喜歡其他建議！