Warum werden HTML-Attribute im DOM anders festgelegt?

Nachdem wir einige Stunden gegraben hatten, beschlossen wir, eine Frage zu SO zu stellen, in der Hoffnung, dass jemand anderes in Bezug auf das folgende Problem helfen könnte.

1. Für eine unserer Webanwendungen haben wir das Onsen UI js Framework mit seiner React-Unterstützungsbibliothek verwendet
2. Wenn wir versuchen, die Anwendung in unseren Entwicklungsumgebungen zu rendern, scheint alles ordnungsgemäß zu funktionieren, aber wenn wir es in unserer Staging-Umgebung versuchen, verhalten sich einige Komponenten anders

3. Was wir bisher gefunden haben : Es scheint, dass in unserer Staging-Umgebung einige HTML-Attribute im DOM unterschiedlich festgelegt sind:

   |----------------|---------------|--------------|
   | HTML attribute |    DEV ENV    | STAGING ENV  |
   |----------------|---------------|--------------|
   | fixed-content  | fixed-content | fixedcontent |
   |----------------|---------------|--------------|
   | active-index   | active-index  |     index    |
   |----------------|---------------|--------------|

Aus diesem Grund kann das Onsen-Framework die Attribute in den HTML-Elementen nicht finden und verhält sich unabhängig davon anders:

1. Wir verwenden denselben Browser (überprüft mit Chrome, Edge, Firefox)
2. Wir haben den gleichen JS-Code auf beiden Envs geladen

Welche Unterschiede gibt es zwischen envs:

1. Die JS-Dateien werden lokal auf unseren Entwicklungsmaschinen und auf S3 für unsere Staging-Umgebung gespeichert.
2. Wir verwenden eine verschlüsselte Verbindung in unserer Staging-Umgebung
3. Der Accept-Encoding-Header befindet sich gzip, deflatelokal und gzip, deflate, brim Staging
4. Vielleicht etwas anderes zu suchen?

Weiß jemand, was zum Teufel hier passiert?

Wir haben das Problem tatsächlich gefunden und die Lösung ist recht einfach, obwohl wir Stunden gebraucht haben, um es zu finden.

In unseren Staging- / Produktionsumgebungen verwenden wir das Babel-Plugin transform-react-remove-prop-types, um die React-Requisitentypen zu entfernen.

Leider stützt sich die Onsen UI React-Unterstützungsbibliothek auf die definierten Requisitentypen ihrer Komponenten. Als sie entfernt wurden, begann sich die Bibliothek anders zu verhalten.

Was wir gemacht haben:

1. Wir haben das Babel-Plugin auf die Version aktualisiert 0.3.3, um die ignoreFilenamesOption nutzen zu können

2. Wir haben die Datei übersprungen, die den Code der Onsen UI React-Bibliothek enthält

   if (cli.production) {
       config.babel.plugins.push([
           'transform-react-remove-prop-types',
           {
               ignoreFilenames: ['projectleader']
           }
       ]);
   }