javascript - polyfill - react js requirements

Los objetos no son válidos como hijo secundario(en Internet explorer 11 para React 15.4.1)

Question

Los objetos no son válidos como hijo React (encontrado: objeto con claves {$$ typeof, type, key, ref, props, _owner, _store}). Si pretendía representar una colección de elementos secundarios, use una matriz en su lugar o envuelva el objeto utilizando createFragment (objeto) de los complementos React. Compruebe el método de renderización de la App .

AppContainer:

const mapDispatchToProps = (dispatch) => {
    return {

            }
        }
    }
}

Componente:

class App extends Component {
    render() {
        return (
        );
    }
}

Arriba está mi función de render para app.js. Este Código funciona bien en google chrome, pero cuando se ingresa a Internet Explorer no funciona y está generando el error anterior.

Answer 1

Un problema desde Reaccionar 15.4 con IE11

Si aún tiene este problema, puede echar un vistazo a este problema de reacción # 8379 sobre React 15.4 e IE11 . Tuve el mismo problema con webpack dev mode / IE11 / React 15.4, y parece que React y ReactDom usan su versión de un polyfill Symbol (esto es nuevo con 15.4):

De alguna manera, reaccionar y reaccionar-dom ya no están "de acuerdo" con el valor $$typeof

que debería ser typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103 .

Solución

Resolví este problema al reordenar polyfill y react / react-dom para estar seguro de que el símbolo de polyfill está cargado antes de React y el símbolo de ReactDom ... Ahora están "de acuerdo" en el valor de tipo de $$.

Ejemplo para webpack:

entry: [
 ''babel-polyfill'', // Load this first
 ''react-hot-loader/patch'', // This package already requires/loads react (but not react-dom). It must be loaded after babel-polyfill to ensure both react and react-dom use the same Symbol.
 ''react'', // Include this to enforce order
 ''react-dom'', // Include this to enforce order
 ''./index.js'' // Path to your app''s entry file
]

Answer 2

En mi caso con React Native, arrastramos este misterioso error por semanas, apareciendo solo en versiones de Android sin un depurador adjunto.

El culpable fue un

import ''core-js''

en nuestro componente raíz, parece que el polyfill estaba arruinando las cosas

La solución fue simplemente eliminarlo ya que ya no es necesario en mi caso

Parte relevante de package.json

  "react-native": "0.44.2",
  "react": "16.0.0-alpha.6",

Answer 3

Mi problema era que babel-polyfill necesitaba estar por encima de mis react-hot-loader incluye. Reaccionar y reaccionar es necesario para preceder a babel-polyfill en la entrada del paquete web por los motivos descritos en este comentario:

https://github.com/facebook/react/issues/8379#issuecomment-263962787 .

Parecía esto:

dev:

entry: [
  ''babel-polyfill'',
  ''react-hot-loader/patch'',
  `webpack-dev-server/client?${localhost}:${PORT}`,
  ''webpack/hot/only-dev-server'',
  PATHS.app
]

producción:

entry: [
  ''babel-polyfill'',
  ''react'',
  ''react-dom'',
  PATHS.app
]

Previamente...

dev:

entry: [
  ''react-hot-loader/patch'',
  `webpack-dev-server/client?${localhost}:${PORT}`,
  ''webpack/hot/only-dev-server'',
  ''babel-polyfill'',
  PATHS.app
]

producción:

entry: [
  ''babel-polyfill'',
  PATHS.app
]

Answer 4

Mi problema era el mismo y estaba usando React Native y estaba probando la aplicación de Android en el dispositivo / emulador ABD .
Después de ver las sugerencias de arriba para eliminar la importación ''core-js'' y agregar

entry: [
 ''babel-polyfill'', // Load this first
 ''react-hot-loader/patch'', // This package already requires/loads react (but not react-dom). It must be loaded after babel-polyfill to ensure both react and react-dom use the same Symbol.
 ''react'', // Include this to enforce order
 ''react-dom'', // Include this to enforce order
 ''./index.js'' // Path to your app''s entry file
]

al archivo android / app / build.gradle, mi problema no se resolvió, ya que no tenía ninguna declaración de importación como importar ''core-js'' o importar ''babel-polyfill'' inicialmente en mi código.

**

Solución:

** Instado de eliminar la declaración de importación, agregué la importación ''core-js''; a mi directorio raíz que era index.js. Con la adición manual de la biblioteca a través del comando Prompt / Terminal. Esto resolvió mi problema. Espero que esto ayude.