Breaking Webpack in IE11

It's hard to keep track of this, so thanks for hanging on with me. Some users have complained that our site got corrupted in IE11. The app uses nextjs 3.0.1 and webpack 2.7.0.

Debug in development mode

I think I have a similar issue to Angular RxJs timer stopping in IE11 . I am getting an error from a link called webpack /// webpack bootstrapxxxxxxxxxx (where x are some hex digits) in IE11.

Here's the function causing the problem:

// 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 an error Unable to get property 'call' of undefined or null reference

.

I guess this is due to the lack of a polyfill, so I followed the advice https://github.com/zeit/next.js/issues/1254 and added that to the next one. config.js (webpack config for the following):

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 still see the same error.

Additional product information

Interestingly, I have a different issue in the production version of the nextjs app. It's deep in the file app.js

generated by the following, 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

      

He throws Expected identifier

. Is it because the module is not translating from ES6 to ES5 correctly? Probably the main problem (which I saw in development) and not a library problem heroku-logger

.

Understand this is a tricky problem and I'm probably missing some details. Thanks in advance for your help!

+3


source to share


1 answer


In case anyone else was struggling with this, I left babel-polyfill

in the webpack config and changed the command build

to:

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

      



This is rather clumsy because some code is loaded using the webpack and then back into the output directory. Will love other suggestions!

0


source







All Articles