¿Por qué los atributos HTML se configuran de manera diferente en el DOM?

Después de excavar varias horas, decidimos hacer una pregunta sobre SO, con la esperanza de que alguien más pudiera ayudar con el siguiente problema.

1. Para una de nuestras aplicaciones web, utilizamos el marco Onsen UI js con su biblioteca de soporte React
2. Cuando intentamos representar la aplicación en nuestros entornos de desarrollo, todo parece funcionar correctamente, pero cuando lo probamos en nuestro entorno de preparación, algunos componentes se comportan de manera diferente

3. Lo que hemos encontrado hasta ahora : parece que en nuestro entorno de ensayo, algunos atributos HTML se configuran de manera diferente en el DOM:

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

Debido a esto, el marco Onsen no puede encontrar los atributos en los elementos HTML y se comporta de manera diferente independientemente de que:

1. Usamos el mismo navegador (marcado con Chrome, Edge, Firefox)
2. Tenemos el mismo código JS cargado en ambos envs

Qué diferencias hay entre envs:

1. Los archivos JS se almacenan localmente en nuestras máquinas de desarrollo y en S3 para nuestro entorno de preparación.
2. Usamos una conexión encriptada en nuestro entorno de preparación
3. El encabezado Accept-Encoding está gzip, deflateen local y gzip, deflate, bren etapas
4. Tal vez algo más que buscar?

¿Alguien sabe qué demonios está pasando aquí?

De hecho, encontramos el problema y la solución es bastante simple, aunque nos llevó horas encontrarlo.

En nuestros entornos de puesta en escena / producción, utilizamos el complemento babel transform-react-remove-prop-typespara eliminar los tipos de accesorios React.

Desafortunadamente, la biblioteca de soporte Onsen UI React se basa en los tipos de utilería definidos de sus componentes, por lo que cuando se despojaron, la biblioteca comenzó a comportarse de manera diferente.

Lo que hicimos:

1. Actualizamos el complemento de babel a la versión 0.3.3para poder usar la ignoreFilenamesopción

2. Omitimos el archivo que contiene el código de la biblioteca Onsen UI React

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