Por que os atributos HTML são definidos de maneira diferente no DOM?

Depois de cavar várias horas, decidimos fazer uma pergunta sobre SO, esperando que alguém pudesse ajudar com relação ao seguinte problema.

1. Para um de nossos aplicativos da web, usamos a estrutura Onsen UI js com sua biblioteca de suporte ao React
2. Quando tentamos renderizar o aplicativo em nossos ambientes de desenvolvimento, tudo parece funcionar corretamente, mas quando tentamos em nosso ambiente de teste, alguns componentes se comportam de maneira diferente

3. O que descobrimos até agora : parece que em nosso ambiente de preparação, alguns atributos HTML são definidos de maneira diferente no DOM:

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

Por esse motivo, a estrutura Onsen não pode encontrar os atributos nos elementos HTML e se comporta de maneira diferente, independentemente de:

1. Usamos o mesmo navegador (verificado com Chrome, Edge, Firefox)
2. Temos o mesmo código JS carregado nos dois envs

Quais são as diferenças entre os envs:

1. Os arquivos JS são armazenados localmente em nossas máquinas de desenvolvimento e no S3 para nosso ambiente de teste.
2. Usamos uma conexão criptografada em nosso ambiente de teste
3. O cabeçalho Accept-Encoding está gzip, deflateno local e gzip, deflate, brno preparo
4. Talvez algo mais para procurar?

Alguém sabe o que diabos está acontecendo aqui?

Na verdade, encontramos o problema e a solução é bastante simples, mesmo que levássemos horas para encontrá-lo.

Em nossos ambientes de preparação / produção, usamos o plug transform-react-remove-prop-types- in babel para remover os tipos de suporte do React.

Infelizmente, a biblioteca de suporte Onsen UI React se baseia nos tipos de objetos definidos por seus componentes, portanto, quando foram retirados, a biblioteca começou a se comportar de maneira diferente.

O que fizemos:

1. Atualizamos o plug-in babel para a versão 0.3.3para poder usar a ignoreFilenamesopção

2. Ignoramos o arquivo que contém o código da biblioteca Onsen UI React

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