Webpack breaking in IE11

Question

Es ist schwierig, dies zu verfolgen, also danke, dass du mich begleitet hast. Einige Nutzer haben sich darüber beschwert, dass unsere Website in IE11 defekt ist. Die App verwendet nextjs 3.0.1 und webpack 2.7.0.

Debugging im Entwicklungsmodus

Ich glaube, ich habe ein Problem ähnlich wie Angular RxJs timer pausing on IE11. Ich bekomme einen Fehler von einer Referenz namens webpack /// webpack bootstrapxxxxxxxxxx (wo die x sind einige Zahlen in hex) in IE11.

Hier ist die Funktion, die das Problem verursacht:

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

Die Linie modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); führt den Fehler Unable to get property 'call' of undefined or null reference.

Ich stelle mir vor, dies zu einer fehlenden polyfill fällig ist, so folgte ich dem Rat bei https://github.com/zeit/next.js/issues/1254 und fügte hinzu, dies zu next.config.js (die webpack Config für den nächsten):

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

Ich bin immer noch zu sehen der gleiche Fehler.

Zusätzliche Details in der Produktion

Eine Sache, die interessant ist, dass ich ein anderes Problem in der Produktionsversion der nextjs App haben. Es ist tief in der app.js Datei bis zum nächsten erzeugt, aber der Fehler scheint von dieser Linie kommen https://github.com/ianstormtaylor/heroku-logger/blob/master/src/index.js#L12:

const { 
    LOG_LEVEL, 
    NODE_ENV, 
} = process.env 

Es Expected identifier werfen. Liegt das daran, dass das Modul nicht korrekt von ES6 nach ES5 übertragen wird? Es gibt wahrscheinlich ein zugrunde liegendes Problem (das ich in Entwicklung gesehen habe), eher als ein Problem mit der heroku-logger Bibliothek.

Erkennen Sie, dass dies ein kompliziertes Problem ist und ich wahrscheinlich einige Details vermisse. Vielen Dank im Voraus für Ihre Hilfe!

Answer 1

Falls jemand anderes mit diesem rang, verließ ich die babel-polyfill in der webpack config und änderte den build Befehl:

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

Das ist ziemlich klobig, weil einige Code babel-ified ist durch webpack und dann wieder im Ausgabeverzeichnis. Würde andere Vorschläge lieben!