Webpack breaking in IE11

Question

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.

Debugging in development mode

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.

Here's the function that's causing the issue:

// 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;
}

The line modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); throws the error Unable to get property 'call' of undefined or null reference .

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.

Additional details in production

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

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!

Answer 1

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

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