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.

Para um de nossos aplicativos da web, usamos a estrutura Onsen UI js com sua biblioteca de suporte ao React
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

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:

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

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

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

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

— Mihai Matei
fonte

Por acaso, você está usando a versão React com a API JS angular ou base? Como o JS e a versão angular parecem usar conteúdo fixo como atributo, mas a versão React usa renderFixed como atributo. Ou você está usando-o corretamente e a tag reactjs desta pergunta é enganosa?

— Shilly 24/01

Portanto, o onsen ui tem um núcleo js puro com uma biblioteca de reações em cima dele. Usamos esses 2 em nosso aplicativo

— Mihai Matei

Você está prefixando os atributos data-*?

— Brett Gregson

Não. Na verdade, o framerwork da interface do usuário da onsen lida com tudo, mas até onde eu vi, eles não usam conjuntos de dados

— Mihai Matei

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:

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

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']
        }
    ]);
}

— Mihai Matei
fonte