Webpack se brisant dans IE11

Question

Il est difficile de retracer cela, alors merci de me supporter. Certains utilisateurs se plaignaient que notre site était cassé dans IE11. L'application utilise nextjs 3.0.1 et webpack 2.7.0.

Debugging en mode développement

je pense avoir un problème similaire à Angular RxJs timer pausing on IE11. J'obtiens une erreur d'une référence appelée webpack /// webpack bootstrapxxxxxxxxxx (où les x sont des nombres en hexadécimal) dans IE11.

est ici la fonction qui est la cause du problème:

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

La ligne modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); jette l'erreur Unable to get property 'call' of undefined or null reference.

J'imagine que cela est dû à un manque polyfill, donc je suivais les conseils à https://github.com/zeit/next.js/issues/1254 et a ajouté à next.config.js (la configuration suivante pour 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 
    }) 
} 

Je vois encore la même erreur.

détails supplémentaires dans la production

Une chose qui est intéressant est que j'ai un autre problème dans la version de production de l'application nextjs. Il est profond dans le fichier généré par app.js suivant, mais l'erreur semble provenir de cette ligne https://github.com/ianstormtaylor/heroku-logger/blob/master/src/index.js#L12:

const { 
    LOG_LEVEL, 
    NODE_ENV, 
} = process.env 

Il jette des Expected identifier. Est-ce parce que le module n'est pas transmis de ES6 à ES5 correctement? Il y a probablement un problème sous-jacent (que j'ai vu en développement), plutôt qu'un problème avec la bibliothèque heroku-logger.

Réalisez ceci est un problème compliqué et il me manque probablement quelques détails. Merci d'avance pour votre aide!

Answer 1

Dans le cas où quelqu'un d'autre a lutté avec cela, je quitté la babel-polyfill dans la configuration webpack et changé la commande build à:

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

C'est assez maladroit parce que certains code est babel-ified par webpack puis à nouveau dans le répertoire de sortie. J'adorerais d'autres suggestions! Cette erreur est généralement le résultat du fragment contenant le module n'est pas servi au client