Published on

React und Internet Explorer 11 Browser-Kompatibilität

Authors

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.

Ein neues Projekt erstellen
Ein neues Projekt erstellen

Die Projektstruktur sieht dann wie folgt aus. In dem Verzeichnis ClientApp befindet sich der React Client.

Projektstruktur
Projektstruktur

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.

Im Verzeichnis "ClientApp" npm install und anschließend npm start ausführen
Im Verzeichnis "ClientApp" npm install und anschließend npm start ausführen

Gibt man nun http://localhost:5000 in das Adressfeld des IE11 Browsers ein, bleibt die Webseite leer. Die Console zeigt die folgenden Fehler.

Fehler im Internet Explorer 11
Fehler im Internet Explorer 11

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.

Index.js
Index.js

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.

Das Verzeichnis .cache muss gelöscht werden
Das Verzeichnis .cache muss gelöscht werden

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.

Package.json
Package.json

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.

Die Console des IE11 ist jetzt fehlerfrei
Die Console des IE11 ist jetzt fehlerfrei

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.