- Published on
React und Internet Explorer 11 Browser-Kompatibilität
- Authors
- Name
- Michael Groncki
- @dergroncki
Es kann einem schon ganz schön nerven, wenn man auch den IE11 weiterhin bei seinen Projekten unterstützen muss. Nicht das ich grundsätzlich etwas gegen den IE11 hätte, aber der Browser unterstützt neuere Technologien nur noch eingeschränkt oder gar nicht mehr.
Mehr Information zu den Browsern von Microsoft findet man hier: Lifecycle FAQ - Internet Explorer and Edge
Aber ein Glück gibt es Polyfills!
"A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it. (Polyfill, 3/27/2020 by MDN contributors)
Für diese Beschreibung erstelle ich zunächst eine ASP.NET Core Web Application mit einem React Client. Anschließend führe ich den React Client aus und teste diesen dann mit dem Internet Explorer 11.
Nach dem Öffnen von Visual Studio 2019 folge ich dem Wizard für die Erstellung eines Projektes.
Die Projektstruktur sieht dann wie folgt aus. In dem Verzeichnis ClientApp befindet sich der React Client.
Um die Client Applikation im Browser auszuführen, öffne ich ein Terminalfenster und wechsle dann in das Verzeichnis ClientApp. Mit "npm install" und "npm start" wird der Client übersetzt und gestartet.
Gibt man nun http://localhost:5000 in das Adressfeld des IE11 Browsers ein, bleibt die Webseite leer. Die Console zeigt die folgenden Fehler.
Wie man sieht, gibt es Skriptfehler, weil der Code vom IE11 nicht richtig verstanden wird. Die Lösung zu diesem Problem sind Polyfills. Deshalb installieren wir zunächst react-app-polyfill.
npm install react-app-polyfill
Nach der Installation fügt man die folgenden Zeilen in der Datei Index.js ganz vorne ein.
Jetzt noch im Verzeichnis \ClientApp\node_modules das Verzeichnis .cache löschen.
Wenn in Node.js zum ersten Mal ein Modul benötigt wird, wird es zwischengespeichert. Jedes Mal, wenn das Modul benötigt wird, greift Node tatsächlich auf die zwischengespeicherte Instanz zu (es gibt wie immer Ausnahmen zu dieser Regel). Deshalb ist es wichtig, den Cache zu löschen.
Zu allerletzt muss noch die Browserliste in der Datei Package.json modifiziert werden, damit der Internet Explorer 11 auch während der Entwicklung unterstützt wird.
The browserslist configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified. The production list will be used when creating a production build by running the build script, and the development list will be used when running the start script. You can use https://browserl.ist to see the browsers supported by your configured browserslist. (Create React App, 1/16/2020 by Evan Grim)
Anschließend funktioniert der IE11 fehlerlos. Ein Blick in die Console des Browser bestätigt dies.
Es zeigt sich, wie wichtig es ist, immer wieder mal die einwandfreie Funktion des Clients im IE11 zu prüfen. Sonst hat man am Ende das Problem, das trotz Pollyfills irgendetwas nicht funktioniert.