React: Приложение React не отображается в IE11 и ниже

@FarhadG спасибо за отчет. Можешь попробовать воспроизвести ошибку в dev? К сожалению, различие зависимостей не слишком полезно само по себе. Нам понадобится воспроизводимый тестовый пример или трассировка стека, чтобы попытаться сузить здесь основную причину.

Спасибо за быстрый ответ, @Aweary .

Вы хотите, чтобы я скомпилировал приложение в режиме development и протестировал или запустил сервер webpack в режиме dev (т. е. горячая перезагрузка и т. д.)

Вы увидите пустой экран или наполовину скомпилированное приложение React со следующей ошибкой:

Вы пробовали перейти по ссылке в этой ошибке? Он должен включать информацию, объясняющую, почему произошла ошибка.

Да, @gaearon. Непонятно, почему это будет работать в Chrome и Firefox, но не в IE11 и ниже. Мысли?

Возможно, вы включили babel-plugin-react-inline-elements . Для этого требуется полифил символа, и без него он работать не будет. См . https://github.com/facebook/react/issues/5138.

Собираюсь попробовать, @gaearon , однако, сбивает с толку, что это работало все это время до нескольких дней назад.

Вы хотите, чтобы я скомпилировал приложение в режиме разработки и протестировал или запустил сервер веб-пакетов в режиме разработки (например, горячая перезагрузка и т. д.)

В любом случае, пока React не создается для производства. Это должно, по крайней мере, дать нам лучшее представление о том, где возникает проблема.

Просмотрел нашу кодовую базу, и мы не использовали явно babel-plugin-react-inline-elements и не использовали какие-либо из наших конфигураций. Спасибо за предложение, @gaearon.

Итак, мы обслуживаем наше приложение в development , и оно, кажется, работает стабильно, но когда мы объединяем его в production , мы видим тот же результат. Дайте мне знать, какая информация будет полезна для нас, чтобы помочь отследить эту проблему, @Aweary.

@FarhadG Ты абсолютно уверен? Например, возможно, вы используете предустановку, которая «оптимизирует» React, которая может включать в себя другую предустановку, которая в конечном итоге может включать этот плагин.

@FarhadG Я наткнулся на это в своем текущем проекте, и мне пришлось включить полифилл Symbol. Я делаю это, добавляя polyfills.js в свою точку входа, которая выглядит так:

/**
 * 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')

Редактировать: мы используем пакет babel-preset-react-optimize

Это была наша первоначальная идея после вашего предложения, @gaearon. Я следовал этим конкретным пресетам:

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

... и не видел, чтобы им требовалось что-то делать с плагинами optimization .

Просто попробовал, ради попытки, @nhunzaker , и проблема не устранена.

У меня такая же проблема. Однако у меня есть два приложения — одно с 15.1.0 и одно с 15.4.0 с более поздним путем обновления.

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

В каждом случае в IE11 исключение:

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[]=

Что выводит:

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

Однако это происходит только в развернутом производстве. Если я выполняю производственную сборку локально и обслуживаю ее с Python SimpleHTTPServer, это исключение не срабатывает.

Я просто хочу сообщить об этом, но с завтрашнего дня я сворачиваю этот проект, так как начинаю новую работу в новом году, поэтому после этого у меня не будет доступа к исходному коду.

Это единственные используемые плагины babel (это из нашей конфигурации www, admin снова немного отличается)

"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",

Обновление 1: в IE теперь появляется окно исключения в нашей среде разработки (но не в самом производстве). Полный текст такой:

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`.

В продакшне это просто то, что указано выше, без упоминания CoreLayout (это просто оболочка приложения, которая вызывает ReactDOM.render)

Обновление 2:

Я сделал это с полифиллом. Я проверил в консоли и Symbol доступен, однако я все еще получаю эту ошибку

Обновление 3:

Проверил папку node_modules, babel-plugin-react-inline-elements нигде не включен, поэтому для меня это не связано

Обновление 4:

Один проект вызвал немного отвлекающего маневра.

Проект, который в настоящее время работает на React 15.1.0, не имел обновлений зависимостей с октября в файле package.json, однако пакеты помечены символом вставки ^ , поэтому при работе в CI это означает, что он был в любом случае обновление до основной версии.

Я изменил это на блокировку версий с помощью тильды (т.е. ~ для версий), и это решило проблему для этого проекта.

Я откатил второй проект до 15.3.2, и теперь он тоже работает нормально.

Нам понадобится полный проект, воспроизводящий это, чтобы исследовать.

Спасибо, что включили ваши стратегии отладки, @tanepiper. Вот что мы сделали, пытаясь выяснить, в чем проблема:

• Отключено react-tap-event-plugin
• Удалено react-tap-event-plugin
• react-tap-event-plugin возвращено с v2.x на v1.0.0
• Запустил приложение в режиме development в IE11 и понял, что это как-то связано с веб-пакетом, создающим наше реагирующее приложение в производственном режиме.
• Установил зависимости и собрал приложение с различными версиями узлов: v5.5.0 , v6.3.0 , v.6.6.0
• Откат назад на много недель помог нам понять, что это не то, что мы представили, а скорее зависимость
• Заблокированы все dev-dependencies , чтобы убедиться, что это не связано с одной из наших зависимостей сборки.
• Заблокированы все dependencies , чтобы убедиться, что это не одна из наших явных зависимостей.
• Отключил shrinkwrap и заблокировал наш package.json в соответствии с нашим успешным npm-shrinkwrap.json , что помогло нам понять, что это подзависимость
• Упаковали в термоусадочную пленку набор node_modules , которые, как мы знали, работают, и сравнили их со сломанными, чтобы помочь нам понять, какими потенциально могут быть зависимости (как указано в наших проблемах).
• Упакованы только наши dependencies , но не наши dev-dependencies , что показало нам, что это, скорее всего, проблема одного из наших dependencies , поскольку наши среды ETE были успешно установлены при установке с npm-shrinkwrap.json , который содержал только заблокированные наши dependencies
• Пробовал несколько предложений из проблем, отмеченных выше:
  
  
  
  • Убедившись, что мы не использовали babel-plugin-react-inline-elements
  
  
  • Убедившись, что мы не использовали babel-preset-react-optimize
  
  
  • Пробовал полифил require('core-js/modules/es6.symbol')
  
  

@gaearon См. обновления выше - откатился до 15.3.2, и он работает, так что это недавнее изменение. Также оказалось, что CI все равно загружал React 15.4 вместо 15.1 из-за неправильной конфигурации package.json .

Я попытаюсь посмотреть, смогу ли я нарисовать воспроизводимый случай для этого, но немного покопавшись, похоже, что все генерирует дочерние элементы для https://github.com/facebook/react/blob/master/src/shared/utils/ traverseAllChildren.js передает объект, а не массив, и это вызывает это исключение.

Проблема в том, что React не «распознает» свой собственный элемент. Вероятно, это происходит из-за неудачной проверки $$typeof . Каким-то образом react и react-dom больше не «согласуются» со значением $$typeof , которое должно быть typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103 .

Это может означать, что react и react-dom каким-то образом получают разные результаты при тестировании полифилла Symbol . Например, если вы загружаете полифилл после инициализации react , но до того, как это сделает react-dom , вы можете столкнуться с этой проблемой.

Для дальнейшей отладки я рекомендую найти этот фрагмент в вашем комплекте:

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

Вы должны увидеть его два раза (один раз от react и один раз от react-dom ):

Попробуйте добавить журналы стоимостью r и посмотрите, отличаются ли они. Если это так, вам нужно выяснить, почему react и react-dom получают разные значения при проверке существования Symbol .

Причина, по которой это новое в 15.4.0, заключается в том, что раньше была только одна версия этого кода, но теперь она есть в обоих пакетах (намеренно).

Обновлять:

Коллега смог найти обходной путь, который включал удаление импорта ReactDOM из файла .jsx и вместо этого перечисление его в разделе плагинов webpack.config.js.

Исходное содержимое файла

webpack.config.js

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

маршруты.jsx

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

Обновленные файлы

webpack.config.js
```плагины: [
новый webpack.ProvidePlugin({
i18n: "i18следующий",
'_': "лодаш",
«число»: «число»,
Реагировать: «реагировать»,
ReactDOM: "реагировать-дом"
})
],

routes.jsx

импортировать «babel-polyfill»;
//отрезать
ReactDOM.render(маршруты, 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": {
"альт": "^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-реагировать": "^ 6.16.0",
"babel-preset-stage-2": "^6.18.0",
"блок-интерфейс": "^ 2.70.1",
"чай": "^3.5.0",
"имена классов": "^2.2.5",
"css-загрузчик": "^0.26.0",
"фермент": "^2.6.0",
"поток": "^3.1.0",
"история": "^4.4.0",
"i18next": "^4.1.0",
"json-загрузчик": "^0.5.4",
"карма": "^1.3.0",
"карма-чай": "^0.1.0",
"карма-чай-плагины": "^0.8.0",
"карма-хром-пусковая установка": "^2.0.0",
"карма-кли": "^1.0.1",
"карма-мокко": "^1.3.0",
"карма-мокко-репортер": "^2.2.1",
"карма-синон": "^1.0.5",
"карма-синон-чай-последний": "^0.1.0",
"karma-sourcemap-loader": "^0.3.7",
"карма-вебпак": "^ 1.8.0",
"лодаш": "^4.17.2",
"момент": "^2.17.0",
"мокко": "^3.1.2",
"момент-часовой пояс": "^0.5.9",
"узел-дерзость": "^3.13.0",
"число": "^1.5.5",
«реагировать»: «15.4.1»,
"реакция-аддоны-тест-утилиты": "15.4.1",
"реакция-бутстрап": "^0.30.7",
"реакция-дом": "15.4.1",
"реакция-маршрутизатор": "^3.0.0",
"реакция-путевая точка": "^4.1.0",
"sass-загрузчик": "^4.0.2",
"синон": "^ 1.17.6",
"синон-чай": "^2.8.0",
"стиль-загрузчик": "^0.13.1",
"суперагент": "^3.0.0",
"вулкан": "git+ ssh://[email protected]/mdsol/vulcan#2.2.2 ",
"веб-пакет": "^ 1.13.3"
},
```

У вас была возможность попробовать мое предложение из комментария выше? https://github.com/facebook/react/issues/8379#issuecomment-263962787

@gaearon Я тоже сталкиваюсь с этой проблемой. Я сузил его до некоторой комбинации react + babel-polyfill или babel-plugin-transform-runtime . Я постараюсь в ближайшее время запустить сокращенный тестовый пример.

Было бы очень полезно, если бы вы последовали моему предложению выше и сообщили мне о своих выводах.
Спасибо!

Хорошо, вот изменение, которое я сделал в обоих местах:

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

Результат из хрома:

Результат из IE11

Здорово! Как видите, они разные. Можете ли вы теперь попытаться выяснить, почему Symbol существует в одном случае, но не существует в другом? Может быть, это полифилл, который вы загружаете слишком поздно?

Я исправил это, установив порядок загрузки в моем пакете веб-пакетов:

1. вавилон-полифилл
2. реагировать
3. реакция-дом

Спасибо за ваше терпение и вашу бесконечную мудрость 😉 @gaearon

Я собираюсь закрыть это, потому что это не похоже на ошибку. К сожалению, это сломало некоторые приложения, но очень сложно защититься от подобных случаев. В общем, я рекомендую запускать любые глобальные полифиллы перед любым другим кодом в комплекте . Поскольку полифиллы эффективно изменяют среду, следует позаботиться о том, чтобы делать это последовательно.

@damonbauer весь babel-polyfill тяжелый, вы можете добавить только Symbol polyfill (https://github.com/thejameskyle/babel-react-optimize/issues/16#issuecomment-263519239)

Спасибо всем в этой теме, особенно. @gaearon и @damonbauer. В случае, если это поможет кому-то еще, вот изменения, которые я в итоге сделал:

Это меня тоже укусило после обновления до React 15.4, и мне пришлось потратить некоторое время на то, чтобы понять это. Поэтому я публикую это, чтобы помочь другим в такой же ситуации.

Если вы используете react-hot-loader v3 для горячей перезагрузки в среде DEV, вам нужно загрузить react-hot-loader/patch после babel-polyfill . Таким образом, поле Webpack entry должно выглядеть следующим образом для правильной работы с react 15.4.x, react-hot-loader v3 и 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
]

Надеюсь это поможет ;)

Привет,

@gaearon , вот мое расследование, чтобы ответить https://github.com/facebook/react/issues/8379#issuecomment -263962787

Столкнувшись с той же проблемой, я попытался понять, почему React.isValidElement не распознает некоторые элементы реакции.
Просматривая код react и react-dom, я подумал, что нет никаких причин, по которым react и react-dom не согласны с тем, что такое REACT_ELEMENT_TYPE , если только вам не требуется полифилл между требованием react и react-dom для первого время. Но импортировать их вместе не должно вызывать проблем.

Действительно, https://github.com/facebook/react/blob/v15.4.2/src/shared/utils/ReactElementSymbol.js#L17 объявляется во время загрузки модуля и используется везде в библиотеке. Таким образом, генерация элементов с помощью ReactDOM.render не должна была быть проблемой, она должна была исходить откуда-то еще.

В конце концов я обнаружил, что элементы, вызывающие проблему, были созданы babel-runtime, потому что там была продублирована логика из ReactElementSymbol, но с наличием полифилла:
https://github.com/babel/babel/blob/v6.22.0/packages/babel-helpers/src/helpers.js#L20

Существует проблема, закрытая как «не исправимая» во время выполнения babel: https://github.com/babel/babel/issues/2517 , потому что реакция не будет использовать переменную REACT_ELEMENT_TYPE .

В моем случае я предполагаю, что проблема связана не с нашим обновлением до 15.4, а с изменением структуры нашего приложения. Теперь мы можем понять, почему нам нужно заранее импортировать полифилл, и это из-за времени выполнения Babel, а не реакции.

Надеюсь, это поможет другим, находящимся в том же сценарии.

привет @leondragan ,
Я все еще сталкиваюсь с проблемой повторного заказа. Какой плагин преобразования я должен добавить в .babelrc ?

Спасибо

Это проблема react-hot-loader , потому что она у меня есть только в режиме разработки, а не в рабочем режиме.
Добавление babel-polyfill перед react-hot-loader/patch исправляет эту ошибку.

На случай, если кто-то еще столкнется с этим, я использовал плагин commons chunk, который загружал реакцию до поли. Чтобы обойти это, я закончил с:

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

Не уверен, что это «правильный» способ, но это единственный способ с общими ресурсами, который, как я обнаружил, работает.

@andrewdavidcostello спасибо, что спасли мой день :)

Для тех, у кого есть ошибка, но ничего из вышеперечисленного не сработало: у меня была точно такая же ошибка, но причина была совершенно другой. Был код, в котором компоненты реакции были разделены между iframe, но компоненты имели разные значения $$typeof в разных iframe, что вызывало ошибку. Хотя это работало с другими браузерами, в IE11 была ошибка.

Я смог заставить это работать, просто включив 'core-js/modules/es6.symbol' BEFORE 'react' .

'core-js/modules/es6.symbol' намного меньше, чем 'babel-polyfill' , поэтому другие могут захотеть попробовать и это.

Я пробовал все вышеперечисленное, и ничего из этого не сработало, кроме настройки работы @jkilesc . Так что порядок импорта имеет значение.

Вы могли бы подумать, что ваш входной скрипт с полифиллами вверху будет отличаться от включения его в виде отдельного файла в ваш входной массив, например, babel-polyfill? Нет.

Итак, из

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

к

// 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')

Почему? Во время переноса порядок библиотек меняется, так что полифилл загружается после React? Но вот. Это также работало там, где babel-polyfill в моем сценарии ввода не работал.

Ожидается, что это не сработает:

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

Импорт ES поддерживается спецификацией (которой следует Babel).
Даже если вы поставите require() перед ним, он будет выполнен позже.

Используйте это правило lint для защиты от этого в будущем.

Ты прав. Именно так, как я в итоге обнаружил. Причина, по которой я опубликовал свое решение, заключается в том, что это результат номер один в Google, и я, возможно, не одинок в своем непонимании того, что заставляет это работать. Просто пытаюсь спасти следующего парня на пару часов :) И спасибо! Это правило линтера определенно добавляется.

Конечно, спасибо за публикацию! Я не хотел сказать, что вы не понимаете вопроса. Просто указываю будущим читателям, что такое поведение ожидаемо (и не является ошибкой ни в Webpack, ни в Babel).

Просто для тех, кто все еще сталкивается с проблемами с этим, я переместил babel-polyfill в конец конфигурации веб-пакета.

Решение найдено здесь:
https://stackoverflow.com/questions/40897966/objects-are-not-valid-as-a-react-child-in-internet-explorer-11-for-react-15-4-1#comment69150679_40928047

Итак, что, наконец, является лучшим подходом здесь?
Должны ли мы понимать, что это проблема с порядком загрузки этих полифиллов, и что пример, предоставленный @notsoluckycharm , должен быть подходящим?

@qborreda Решение состоит в том, чтобы загрузить babel-polyfill перед react и react-dom .

Для пользователей Webpack это означает создание основной записи в виде массива, а первым элементом массива будет babel-polyfill , как показано здесь:
https://github.com/catamphetamine/webpack-react-redux-isomorphic-render-example/blob/4d6208662157cfc6bac115fe5dff956c4976145c/client/webpack/webpack.config.js#L23

Я столкнулся с этим при добавлении babel-polyfill в наше приложение react-redux, созданное с использованием шаблона asp.net core 2. Этот шаблон разделяет конфигурацию вашего веб-пакета на два отдельных файла конфигурации ( webpack.config.js и webpack.config.vendor.js ). Вам нужно изменить массив vendor в webpack.config.vendor.js и поместить вверху babel-polyfill , чтобы заставить это работать.

Мне также пришлось полностью очистить свою среду (а именно удалить папку wwwroot/dist ) и перестроить проект, чтобы изменения были корректно приняты.

Это снова начало происходить со мной на прошлой неделе в IE11 (в прошлом я решил эту же ошибку, используя приведенные выше предложения).

  "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"
  },

Ошибка:

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

У меня тоже ничего не работало, изменение порядка полифилла или что-то еще.
Что сработало для меня, так это добавить эту ссылку JS в index.html

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

После добавления этого мне удалось успешно запустить приложение реакции в IE 11.

Привет, ребята, у меня была похожая проблема, но затем в моем index.js я использовал