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


8

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í?


¿Está por casualidad usando la versión React con la API JS angular o base? Dado que JS y la versión angular parecen usar contenido fijo como el atributo, pero la versión React usa renderFixed como el atributo. ¿O lo está utilizando correctamente y la etiqueta reactjs de esta pregunta es simplemente engañosa?
Shilly

Entonces, onsen ui tiene un núcleo js puro con una biblioteca de reacción encima. Usamos estos 2 en nuestra aplicación
Mihai Matei

¿Estás prefijando los atributos con data-*?
Brett Gregson el

No. En realidad, el onsen ui framerwork maneja todo, pero por lo que vi, no usan conjuntos de datos
Mihai Matei

Respuestas:


12

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']
            }
        ]);
    }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.