React: Reagir aplicativo não renderizando no IE11 e abaixo

@FarhadG obrigado pelo relatório. Você pode tentar reproduzir o erro no dev? Uma diferença de dependências não é muito útil sozinha, infelizmente. Nós precisaríamos de um caso de teste reproduzível ou um rastreamento de pilha para tentar diminuir a causa raiz aqui.

Obrigado pela resposta rápida, @Aweary .

Você quer que eu compile o aplicativo no modo development e teste ou inicie o servidor webpack no modo dev (ou seja, recarregamento a quente, etc.)

Você verá uma tela em branco ou um aplicativo React parcialmente compilado com o seguinte erro:

Já tentou seguir o link nesse erro? Deve incluir as informações explicando por que o erro aconteceu.

Eu fiz, @gaearon. Não fazia sentido por que funcionaria no Chrome e no Firefox, mas não no IE11 e abaixo. Pensamentos?

Talvez você tenha ativado babel-plugin-react-inline-elements . Requer um polyfill Symbol e não funcionará sem ele. Consulte https://github.com/facebook/react/issues/5138.

Vou tentar, @gaearon , no entanto, é desconcertante que esteja funcionando o tempo todo até alguns dias atrás.

Você queria que eu compilasse o aplicativo no modo de desenvolvimento e testasse ou iniciasse o servidor webpack no modo dev (ou seja, recarregamento a quente, etc.)

De qualquer forma, desde que o React não esteja sendo construído para produção. Isso deve pelo menos nos dar uma ideia melhor de onde o problema está ocorrendo.

Examinamos nossa base de código e não estávamos usando babel-plugin-react-inline-elements explicitamente nem nenhuma de nossas configurações. Obrigado pela sugestão, @gaearon.

Então, servimos nosso aplicativo em development e parece funcionar de forma consistente, mas quando agrupamos em production , vemos o mesmo resultado. Deixe-me saber quais informações seriam úteis para ajudar a rastrear esse problema, @Aweary.

@FarhadG Você está absolutamente confiante? Como talvez você use uma predefinição que "otimize" o React, que pode incluir outra predefinição, que pode incluir esse plug-in.

@FarhadG Eu bati isso no meu projeto atual e tive que incluir o polyfill Symbol. Eu faço isso adicionando um polyfills.js ao meu ponto de entrada que se parece com:

/**
 * Place any polyfills here. This project uses core-js:
 * https://github.com/zloirock/core-js
 *
 * ES6:
 * https://github.com/zloirock/core-js/tree/master/es6
 */

//...

// We need Symbol support for some React optimizations
require('core-js/modules/es6.symbol')

Edit: Usamos o pacote babel-preset-react-optimize

Essa foi a nossa ideia original após sua sugestão, @gaearon. Eu segui essas predefinições específicas:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-hot-loader/babel"]
}

... e não os vi exigindo nada a ver com os plugins optimization .

Apenas tentei, por uma questão de tentativa, @nhunzaker , e o problema persiste.

Estou tendo o mesmo problema. No entanto, tenho dois aplicativos - um executando 15.1.0 e outro executando 15.4.0, em um caminho de atualização mais recente.

https://www.votesforschools.com/ (15.1.0)
https://admin.votesforschools.com/ (15.4.0)

Em cada caso no IE11 a exceção é esta:

https://facebook.github.io/react/docs/error-decoder.html?invariant=31&args []=object%20with%20keys%20%7B%24%24typeof%2C%20type%2C%20key%2C% 20ref%2C%20props%2C%20_owner%7D&args[]=

Quais saídas:

Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}).

No entanto, isso está acontecendo apenas na produção implantada. Se eu fizer uma compilação de produção localmente e servi-la a partir do Python SimpleHTTPServer, essa exceção não será acionada.

Eu só quero relatar isso, mas a partir de amanhã vou encerrar este projeto, pois vou começar um novo trabalho no ano novo, então não terei acesso ao código-fonte depois disso.

Estes são os únicos plugins do babel que estão sendo usados ​​(este é da nossa configuração www, admin é novamente um pouco diferente)

"babel-core": "^6.10.4",
"babel-eslint": "^6.1.0",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-class-properties": "^6.10.2",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.9.0",
"babel-runtime": "^6.9.2",

Atualização 1: No IE agora recebendo uma caixa de exceção em nosso ambiente de desenvolvimento (mas não na própria produção). O texto completo é:

Line: 213
Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `CoreLayout`.

Na produção é apenas o acima, sem a menção do CoreLayout (que é apenas o wrapper do aplicativo que chamou ReactDOM.render)

Atualização 2:

Eu fiz o acima com o polyfill. Eu fiz check-in no console e Symbol está disponível, mas ainda estou recebendo esse erro

Atualização 3:

Verifiquei a pasta node_modules, babel-plugin-react-inline-elements não está incluído em nenhum lugar, então para mim não está vinculado a isso

Atualização 4:

Um projeto estava causando um pouco de arenque vermelho.

O projeto que está sendo executado no React 15.1.0 não teve atualizações de dependência desde outubro no arquivo package.json, no entanto, os pacotes são marcados com o símbolo de acento circunflexo ^ - portanto, quando executado no CI, isso significa que foi atualizando para a versão principal de qualquer maneira.

Eu mudei isso para bloqueio de versão til (ou seja ~ nas versões) e resolveu o problema para esse projeto.

Eu reverti o segundo projeto para 15.3.2 e também está funcionando bem agora.

Precisaremos de um projeto completo reproduzindo isso para investigar.

Obrigado por incluir suas estratégias de depuração, @tanepiper. Aqui está o que fizemos para tentar descobrir qual é o problema:

• Desativado react-tap-event-plugin
• Removido react-tap-event-plugin
• Revertido react-tap-event-plugin de v2.x para v1.0.0
• Lançou o aplicativo no modo development no IE11 e percebeu que é algo a ver com o webpack construindo nosso aplicativo reagir no modo de produção
• Instalou dependências e construiu o aplicativo com várias versões de nós: v5.5.0 , v6.3.0 , v.6.6.0
• Reverteu muitas semanas, o que nos ajudou a entender que não era algo que introduzimos, mas sim uma dependência
• Bloqueou todos os dev-dependencies para garantir que não seja algo com uma de nossas dependências de construção
• Bloqueou todos os dependencies para garantir que não seja uma de nossas dependências explícitas
• Desabilitou shrinkwrap e bloqueou nosso package.json de acordo com nosso bem sucedido npm-shrinkwrap.json , o que nos ajudou a entender que é uma subdependência
• Envolvemos um conjunto de node_modules que sabíamos que funcionava e os diferenciamos dos quebrados para nos ajudar a entender quais dependências poderiam ser (conforme observado em nossos problemas)
• Envolveu apenas nossos dependencies e não nossos dev-dependencies o que nos mostrou que é mais provável que seja um problema de um de nossos dependencies , pois nossos ambientes ETE foram bem-sucedidos ao instalar a partir de um npm-shrinkwrap.json que continha apenas nosso dependencies
• Tentei as várias sugestões dos problemas mencionados acima:
  
  
  
  • Garantir que não estávamos usando babel-plugin-react-inline-elements
  
  
  • Garantindo que não estávamos usando babel-preset-react-optimize
  
  
  • Tentei o polyfill require('core-js/modules/es6.symbol')
  
  

@gaearon Veja as atualizações acima - revertida para 15.3.2 e está funcionando, então é uma mudança recente. Também acontece que o CI estava puxando o React 15.4 de qualquer maneira, em vez de 15.1, devido à configuração package.json incorreta.

Vou tentar ver se consigo desenhar um caso reproduzível para isso, mas cavando um pouco, parece que o que gera filhos para https://github.com/facebook/react/blob/master/src/shared/utils/ traverseAllChildren.js está passando um objeto, não um array e é isso que está acionando essa exceção.

O problema é que o React não "reconhece" seu próprio elemento. Isso provavelmente acontece devido à falha na verificação de $$typeof . De alguma forma react e react-dom não "concordam" com o $$typeof que deveria ser typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103 .

Isso pode significar que react e react-dom alguma forma obtêm resultados diferentes ao testar para o polyfill Symbol . Por exemplo, se você carregar um polyfill após react inicializar, mas antes react-dom , você pode ter esse problema.

Para depurá-lo ainda mais, recomendo encontrar este fragmento em seu pacote:

var r="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103;

Você deve vê-lo duas vezes (uma de react e outra de react-dom ):

Tente adicionar logs de r e veja se eles são diferentes. Se forem, você precisa descobrir por que react e react-dom obtêm valores diferentes ao verificar a existência de Symbol .

A razão pela qual isso é novo no 15.4.0 é porque costumava haver apenas uma versão deste código, mas agora está em ambos os pacotes (intencionalmente).

Atualizar:

Um colega de trabalho conseguiu encontrar uma solução alternativa que envolvia remover a importação do ReactDOM de dentro do arquivo .jsx e, em vez disso, listá-la na seção de plugins do webpack.config.js.

Conteúdo do arquivo original

webpack.config.js

plugins: [
    new webpack.ProvidePlugin({
      i18n: "i18next",
      '_': "lodash",
      'numeral': "numeral",
      React: "react"
    })
  ],

rotas.jsx

import 'babel-polyfill';
import {render} from 'react-dom';
//**** snip  ***
ReactDOM.render(routes, document.getElementById('main'));

Arquivos atualizados

webpack.config.js
```plugins: [
new webpack.ProvidePlugin({
i18n: "i18próximo",
'_': "lodash",
'numerais': "numerais",
Reagir: "reagir",
ReactDOM: "react-dom"
})
],

routes.jsx

importar 'babel-polyfill';
//recorte
ReactDOM.render(routes, document.getElementById('main'));

While this works, I still would like to get to the root cause.  For the record, here is what our **devDependencies** looks like:

"devDependencies": {
"alt": "^0.18.6",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-plugin-transform-es2015-classes": "^6.18.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"block-ui": "^2.70.1",
"chai": "^3.5.0",
"classnames": "^2.2.5",
"css-loader": "^0.26.0",
"enzima": "^2.6.0",
"fluxo": "^3.1.0",
"histórico": "^4.4.0",
"i18next": "^4.1.0",
"json-loader": "^0.5.4",
"carma": "^1.3.0",
"karma-chai": "^0.1.0",
"karma-chai-plugins": "^0.8.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.1",
"karma-sinon": "^1.0.5",
"karma-sinon-chai-latest": "^0.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"lodash": "^4.17.2",
"momento": "^2.17.0",
"mocha": "^3.1.2",
"moment-timezone": "^0.5.9",
"node-sass": "^3.13.0",
"numeral": "^1.5.5",
"reagir": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-bootstrap": "^0.30.7",
"react-dom": "15.4.1",
"react-router": "^3.0.0",
"react-waypoint": "^4.1.0",
"sass-loader": "^4.0.2",
"sino": "^1.17.6",
"sinon-chai": "^2.8.0",
"carregador de estilo": "^0.13.1",
"superagente": "^3.0.0",
"vulcan": "git+ ssh://[email protected]/mdsol/vulcan#2.2.2 ",
"webpack": "^1.13.3"
},
```

Você já teve a chance de experimentar a minha sugestão do comentário acima? https://github.com/facebook/react/issues/8379#issuecomment -263962787

@gaearon Estou encontrando esse problema também. Eu reduzi para alguma combinação de react + babel-polyfill ou babel-plugin-transform-runtime . Vou tentar obter um caso de teste reduzido em breve.

Seria muito útil se você pudesse seguir minha sugestão acima e me informar suas descobertas.
Obrigado!

OK, aqui está a alteração que fiz nos dois pontos:

var n="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103; 
debugger; console.log(n); e.exports=n}

Resultado do cromo:

Resultado do IE11

Excelente! Como você pode ver, eles são diferentes. Você pode agora tentar descobrir o que faz Symbol existir em um caso, mas não no outro? Poderia ser um polyfill que você está carregando muito tarde?

Eu consertei isso impondo uma ordem de carregamento no meu pacote webpack:

1. babel-polyfill
2. reagir
3. dom de reação

Obrigado por sua paciência e sua sabedoria infinita 😉 @gaearon

Vou fechar isso porque não parece ser um bug. É uma pena que isso tenha quebrado alguns aplicativos, mas é muito difícil proteger contra casos como esse. Em geral, minha recomendação é que você execute qualquer polyfill global antes de qualquer outro código no pacote . Como os polyfills estão efetivamente modificando o ambiente, deve-se tomar cuidado para fazer isso de forma consistente.

@damonbauer todo babel-polyfill é pesado, você pode adicionar apenas Symbol polyfill (https://github.com/thejameskyle/babel-react-optimize/issues/16#issuecomment-263519239)

Obrigado a todos neste tópico, esp. @gaearon e @damonbauer. Caso isso ajude alguém, aqui estão as alterações que acabei fazendo:

Isso também me mordeu depois de atualizar para o React 15.4 e tive que gastar algum tempo descobrindo isso. Então estou postando isso para ajudar outras pessoas na mesma situação.

Se você estiver usando react-hot-loader v3 para recarregar a quente no ambiente DEV, você precisa carregar react-hot-loader/patch depois babel-polyfill . Portanto, o campo entry do Webpack deve se parecer com o seguinte para funcionar corretamente com react 15.4.x, react-hot-loader v3 e webpack-dev-server:

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
]

Espero que isto ajude ;)

Oi,

@gaearon , aqui está minha investigação para responder https://github.com/facebook/react/issues/8379#issuecomment -263962787

Enfrentando o mesmo problema, tentei ver por que React.isValidElement não estava reconhecendo alguns elementos react.
Olhando através do código react e react-dom, eu pensei que não havia razão para que react e react-dom não concordassem com o que REACT_ELEMENT_TYPE era, a menos que você exija o polyfill entre exigir react e react-dom para o primeiro Tempo. Mas importá-los juntos não deve causar problemas.

De fato, https://github.com/facebook/react/blob/v15.4.2/src/shared/utils/ReactElementSymbol.js#L17 é declarado no momento do carregamento do módulo e usado em todos os lugares da biblioteca. Portanto, gerar elementos com ReactDOM.render não deveria ser um problema, tinha que vir de outro lugar.

Acabei descobrindo que os elementos causadores do problema foram criados pelo babel-runtime, pois a lógica do ReactElementSymbol estava duplicada ali, mas com a presença do polyfill:
https://github.com/babel/babel/blob/v6.22.0/packages/babel-helpers/src/helpers.js#L20

Há um problema fechado como 'não será corrigido' no babel-runtime: https://github.com/babel/babel/issues/2517 porque o react não compartilhará a variável REACT_ELEMENT_TYPE .

No meu caso, estou supondo que o problema não se deve ao nosso upgrade para 15.4, mas a uma mudança de estrutura em nosso aplicativo. Agora podemos entender por que precisamos importar o polyfill de antemão, e é por causa do babel-runtime e não do react.

Espero que isso ajude outros que estão no mesmo cenário.

oi @leondragan ,
Eu ainda enfrento o problema com a re-ordem. Qual plugin de transformação devo adicionar em .babelrc ?

Obrigado

Este é um problema de react-hot-loader porque eu só o tenho no modo dev e não o estou tendo no modo de produção.
Adicionar babel-polyfill antes react-hot-loader/patch corrige esse bug.

Caso alguém se depare com isso, eu estava usando o plugin commons chunk que estava carregando o react antes do poly. Para contornar isso, acabei com:

entry: {
    'commons': ['babel-polyfill', 'react', 'react-dom'],
    'app': './src/js/app/main.tsx'
}

Não tenho certeza se essa é a maneira 'certa', mas é a única maneira com os comuns que encontrei que funcionou.

@andrewdavidcostello obrigado por salvar meu dia :)

Para quem tem o erro, mas nada acima funcionou: Eu tive o mesmo erro exato, mas a causa foi completamente diferente. Havia um código em que os componentes react eram compartilhados entre iframes, mas os componentes tinham valor $$typeof diferente em iframes diferentes, o que causava o erro. Embora isso funcionasse com outros navegadores, o IE11 apresentou o erro.

Consegui fazer isso funcionar apenas incluindo o 'core-js/modules/es6.symbol' BEFORE 'react' .

'core-js/modules/es6.symbol' é muito menor que 'babel-polyfill' então outros podem querer considerar tentar isso também

Eu tentei todos os itens acima e nada funcionou, exceto por um ajuste no trabalho de @jkilesc . Portanto, a ordem das importações importa.

Você pensaria que seu script de entrada com os polyfills no topo seria diferente de incluí-lo como um arquivo separado em sua matriz de entrada como babel-polyfill? Não.

Então de

// index.js
require('core-js/modules/es6.symbol')
require('core-js/modules/es6.promise')
import React from 'React'

para

// webpack.config.js
...
  entry: {
    polyfill: [
      path.resolve(__dirname, '../src/polyfill.js'),
    ],
    main:
...

plugins:[
...
    new webpack.optimize.CommonsChunkPlugin({
      // The order of this array matters
      names: ["main", "vendor", "polyfill"],
      minChunks: 2
    }),
...
]
...

// index.js
- require('core-js/modules/es6.symbol')
- require('core-js/modules/es6.promise')

// polyfill.js
// Absolutely ensure these are loaded first
require('core-js/modules/es6.symbol')
require('core-js/modules/es6.promise')

Por quê? Durante a transpilação, a ordem das bibliotecas parece mudar para que o polyfill seja carregado após o React? Mas aí vai. Isso também funcionou onde o babel-polyfill no meu script de entrada não funcionou.

Espera-se que isso não funcione:

require('core-js/modules/es6.symbol')
require('core-js/modules/es6.promise')
import React from 'React'

As importações de ES são içadas por especificação (que Babel segue).
Mesmo se você colocar require() antes dele, ele será executado mais tarde.

Use esta regra de lint para se proteger contra isso no futuro.

Você está certo. Exatamente como acabei descobrindo. A razão pela qual postei minha solução é que este é o resultado número um do Google e posso não estar sozinho em minha falta de compreensão quanto aos internos que fazem isso funcionar. Apenas tentando salvar o próximo cara algumas horas :) E obrigado! Essa regra de linter está definitivamente sendo adicionada.

Claro, obrigado por postar! Não quis dizer que você não entende o assunto. Apenas apontando para futuros leitores que esse comportamento é esperado (e não um bug no Webpack ou no Babel).

Apenas para alguém que ainda está enfrentando problemas com isso, movi o babel-polyfill para o final na configuração do webpack.

Solução encontrada aqui:
https://stackoverflow.com/questions/40897966/objects-are-not-valid-as-a-react-child-in-internet-explorer-11-for-react-15-4-1#comment69150679_40928047

Então, qual é finalmente a melhor abordagem aqui?
Devemos entender que é um problema com a ordem de carregamento desses polyfills e que o exemplo fornecido por @notsoluckycharm deve ser o caminho a seguir?

@qborreda A solução é carregar babel-polyfill antes react e react-dom .

Para usuários do Webpack, isso significa tornar a entrada principal um array e o primeiro elemento do array será babel-polyfill , como mostrado aqui:
https://github.com/catamphetamine/webpack-react-redux-isomorphic-render-example/blob/4d6208662157cfc6bac115fe5dff956c4976145c/client/webpack/webpack.config.js#L23

Eu me deparei com isso ao adicionar babel-polyfill ao nosso aplicativo react-redux que foi feito usando o modelo asp.net core 2. Este modelo divide a configuração do seu webpack em dois arquivos de configuração separados ( webpack.config.js e webpack.config.vendor.js ). Você precisa modificar o array vendor em webpack.config.vendor.js e colocar babel-polyfill no topo para que isso funcione.

Eu também tive que limpar completamente meu ambiente (ou seja, excluir a pasta wwwroot/dist ) e reconstruir o projeto para que as alterações fossem selecionadas corretamente.

Isso começou a acontecer comigo novamente na última semana no IE11 (resolvi esse mesmo bug no passado usando as sugestões acima).

  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.3.13",
    "babel-runtime": "^6.11.6",
    "better-npm-run": "0.0.11",
    "classnames": "^2.2.5",
    "css-loader": "^0.25.0",
    "currency-formatter": "^1.0.2",
    "debug": "^2.2.0",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.0",
    "file-loader": "^0.9.0",
    "formsy-react": "^0.18.1",
    "fs-extra": "^0.30.0",
    "html-webpack-plugin": "^2.22.0",
    "imports-loader": "^0.6.5",
    "ip": "^1.1.2",
    "json-loader": "^0.5.4",
    "lodash": "^4.11.2",
    "moment": "^2.10.6",
    "node-sass": "^3.4.2",
    "normalize.css": "^4.1.1",
    "numeral": "^1.5.3",
    "pure-render-decorator": "^1.1.0",
    "react": "^15.0.0",
    "react-ab-test": "^2.0.1",
    "react-bootstrap": "^0.30.3",
    "react-cookie": "^1.0.5",
    "react-datetime": "^2.6.0",
    "react-document-meta": "^2.0.3",
    "react-dom": "^15.0.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.8.0",
    "react-router-scroll": "^0.2.0",
    "react-select": "1.0.0-rc.1",
    "react-slick": "^0.14.3",
    "react-sticky": "^5.0.5",
    "react-telephone-input": "^3.5.0",
    "redux": "^3.6.0",
    "redux-thunk": "^2.0.0",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.0",
    "seamless-immutable": "^6.1.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.6",
    "validator": "^5.2.0",
    "webpack": "^1.12.14",
    "whatwg-fetch": "^1.0.0",
    "yargs": "^5.0.0"
  },

O erro:

SCRIPT5022: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of 'RedBoxError'.
File: vendor.ab56ae7d3f092ad6e17f.js, Line: 1391, Column: 6

Nada funcionou para mim também, alterando a ordem do polyfill ou qualquer outra coisa.
O que funcionou para mim é adicionar este link JS no index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>

Depois de adicionar isso, consegui executar com sucesso o aplicativo react no IE 11

Olá pessoal, tive um problema semelhante, mas no meu index.js usei