React: Aplikasi Bereaksi tidak merender di IE11 dan di bawahnya

@FarhadG terima kasih atas laporannya. Bisakah Anda mencoba mereproduksi kesalahan di dev? Sayangnya, perbedaan dependensi tidak terlalu berguna. Kita memerlukan kasus uji yang dapat direproduksi atau pelacakan tumpukan untuk mencoba dan mempersempit penyebab utama di sini.

Terima kasih atas respon cepatnya, @Aweary .

Apakah Anda ingin saya mengkompilasi aplikasi dalam mode development dan menguji atau memulai server webpack dalam mode dev (yaitu memuat ulang panas, dll.)?

Anda akan melihat layar kosong atau aplikasi React setengah terkompilasi dengan kesalahan berikut:

Sudahkah Anda mencoba mengikuti tautan dalam kesalahan itu? Ini harus mencakup informasi yang menjelaskan mengapa kesalahan terjadi.

Saya melakukannya, @gaearon. Tidak masuk akal mengapa itu akan berfungsi di Chrome dan Firefox tetapi tidak di IE11 dan di bawahnya. Pikiran?

Mungkin Anda mengaktifkan babel-plugin-react-inline-elements . Ini membutuhkan polyfill Simbol dan tidak akan berfungsi tanpanya. Lihat https://github.com/facebook/react/issues/5138.

Akan mencoba ini, @gaearon , bagaimanapun, itu membingungkan bahwa itu telah bekerja selama ini sampai beberapa hari yang lalu.

Apakah Anda ingin saya mengkompilasi aplikasi dalam mode pengembangan dan menguji atau memulai server webpack dalam mode dev (yaitu memuat ulang panas, dll.)?

Either way, selama React tidak sedang dibangun untuk produksi. Ini setidaknya harus memberi kita gagasan yang lebih baik tentang di mana masalah ini terjadi.

Melihat melalui basis kode kami dan kami tidak secara eksplisit menggunakan babel-plugin-react-inline-elements juga tidak ada konfigurasi kami. Terima kasih atas sarannya, @gaearon.

Jadi, kami menyajikan aplikasi kami di development dan tampaknya berfungsi, secara konsisten, namun ketika kami menggabungkan production , kami melihat hasil yang sama. Beri tahu saya informasi apa yang berguna bagi kami untuk membantu melacak masalah ini, @Aweary.

@FarhadG Apakah Anda benar-benar percaya diri? Seperti mungkin Anda menggunakan preset yang "mengoptimalkan" React yang mungkin menyertakan preset lain, yang pada akhirnya mungkin menyertakan plugin itu.

@FarhadG Saya menemukan ini pada proyek saya saat ini dan harus menyertakan simbol polyfill. Saya melakukan ini dengan menambahkan polyfills.js ke titik masuk saya yang terlihat seperti:

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

Sunting: Kami menggunakan paket babel-preset-react-optimize

Itu adalah ide awal kami setelah saran Anda, @gaearon. Saya mengikuti preset khusus ini:

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

... dan tidak melihat mereka membutuhkan apa pun yang berkaitan dengan plugin optimization .

Coba saja, demi mencoba, @nhunzaker , dan masalahnya tetap ada.

Saya mengalami masalah yang sama. Namun saya memiliki dua aplikasi - satu menjalankan 15.1.0 dan satu menjalankan 15.4.0, pada jalur pembaruan yang lebih baru.

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

Dalam setiap kasus di IE11 pengecualiannya adalah ini:

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

Keluaran mana:

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

Namun ini hanya terjadi dalam produksi yang dikerahkan. Jika saya melakukan pembuatan produksi secara lokal dan menyajikannya dari Python SimpleHTTPServer, pengecualian ini tidak dipicu.

Saya hanya ingin melaporkan ini, tetapi mulai besok saya meluncurkan proyek ini karena saya memulai pekerjaan baru di tahun baru jadi saya tidak akan memiliki akses ke kode sumber setelah ini.

Ini adalah satu-satunya plugin babel yang digunakan (ini dari konfigurasi www kami, admin sekali lagi sedikit berbeda)

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

Pembaruan 1: Di IE sekarang mendapatkan kotak pengecualian di lingkungan dev kami (tetapi tidak pada produksi itu sendiri). Teks lengkapnya adalah:

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

Pada Produksi hanya yang di atas, tanpa menyebutkan CoreLayout (yang hanya merupakan pembungkus aplikasi yang disebut ReactDOM.render)

Pembaruan 2:

Saya telah melakukan hal di atas dengan polyfill. Saya telah memeriksa di konsol dan Symbol tersedia namun saya masih mendapatkan kesalahan ini

Pembaruan 3:

Memeriksa folder node_modules, babel-plugin-react-inline-elements tidak disertakan di mana pun jadi bagi saya tidak terkait dengan itu

Pembaruan 4:

Satu proyek menyebabkan sedikit ikan haring merah.

Proyek yang saat ini berjalan di React 15.1.0 tidak memiliki pembaruan ketergantungan sejak Oktober di file package.json, namun paket ditandai dengan simbol caret ^ - jadi ketika dijalankan di CI itu artinya memperbarui ke versi utama pula.

Saya telah mengubah ini ke penguncian versi tilde (yaitu ~ pada versi) dan itu menyelesaikan masalah untuk proyek itu.

Saya telah memutar kembali proyek kedua ke 15.3.2 dan sekarang juga berfungsi dengan baik.

Kami membutuhkan proyek lengkap yang mereproduksi ini untuk diselidiki.

Terima kasih telah menyertakan strategi debug Anda, @tanepiper. Inilah yang kami lakukan dalam mencoba mencari tahu apa masalahnya:

• Dinonaktifkan react-tap-event-plugin
• Dihapus react-tap-event-plugin
• Mengembalikan react-tap-event-plugin dari v2.x menjadi v1.0.0
• Meluncurkan aplikasi dalam mode development di IE11 dan menyadari bahwa ini ada hubungannya dengan webpack yang membangun aplikasi reaksi kami dalam mode produksi
• Menginstal dependensi dan membangun aplikasi dengan berbagai versi simpul: v5.5.0 , v6.3.0 , v.6.6.0
• Mengembalikan beberapa minggu yang membantu kami memahami bahwa itu bukan sesuatu yang kami perkenalkan melainkan ketergantungan
• Mengunci semua dev-dependencies untuk memastikan bahwa itu bukan sesuatu dengan salah satu dependensi bangunan kami
• Mengunci semua dependencies untuk memastikan itu bukan salah satu dependensi eksplisit kami
• Menonaktifkan shrinkwrap dan mengunci package.json kami sesuai dengan npm-shrinkwrap.json kami yang berhasil, yang membantu kami memahami bahwa itu adalah sub-dependensi
• Menyusut satu set node_modules yang kami tahu berfungsi dan membedakannya dengan yang rusak untuk membantu kami memahami dependensi mana yang berpotensi (seperti yang disebutkan dalam masalah kami)
• Menyusut hanya dependencies kami dan bukan dev-dependencies kami yang menunjukkan kepada kami bahwa kemungkinan besar itu adalah masalah dari salah satu dependencies kami karena lingkungan ETE kami berhasil saat menginstal dari npm-shrinkwrap.json yang berisi hanya mengunci dependencies kami
• Mencoba beberapa saran dari masalah yang disebutkan di atas:
  
  
  
  • Memastikan kami tidak menggunakan babel-plugin-react-inline-elements
  
  
  • Memastikan kami tidak menggunakan babel-preset-react-optimize
  
  
  • Mencoba polyfill require('core-js/modules/es6.symbol')
  
  

@gaearon Lihat pembaruan di atas - kembali ke 15.3.2 dan berfungsi sehingga ini adalah perubahan terbaru. Juga ternyata CI tetap menarik React 15.4 alih-alih 15.1 karena konfigurasi package.json yang salah.

Saya akan mencoba untuk melihat apakah saya dapat menggambar kasus yang dapat direproduksi untuk ini tetapi menggali sedikit sepertinya apa pun yang menghasilkan anak-anak untuk https://github.com/facebook/react/blob/master/src/shared/utils/ traverseAllChildren.js melewati objek, bukan array dan itulah yang memicu pengecualian ini.

Masalahnya adalah React tidak "mengenali" elemennya sendiri. Ini kemungkinan terjadi karena pemeriksaan $$typeof gagal. Entah bagaimana react dan react-dom tidak lagi "setuju" pada nilai $$typeof yang seharusnya typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103 .

Ini mungkin berarti react dan react-dom entah bagaimana mendapatkan hasil yang berbeda saat menguji Symbol polyfill. Misalnya jika Anda memuat polyfill setelah react diinisialisasi tetapi sebelum react-dom melakukannya, Anda mungkin mendapatkan masalah ini.

Untuk men-debugnya lebih lanjut, saya sarankan untuk menemukan fragmen ini di bundel Anda:

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

Anda akan melihatnya dua kali (sekali dari react dan sekali dari react-dom ):

Coba tambahkan log dengan nilai r dan lihat apakah log tersebut berbeda. Jika ya, Anda perlu mencari tahu mengapa react dan react-dom mendapatkan nilai yang berbeda saat memeriksa keberadaan Symbol .

Alasan mengapa ini baru di 15.4.0 adalah karena dulu hanya ada satu versi dari kode ini, tapi sekarang ada di kedua paket (sengaja).

Memperbarui:

Seorang rekan kerja dapat menemukan solusi yang melibatkan penghapusan impor ReactDOM dari dalam file .jsx dan sebagai gantinya mencantumkannya di bawah bagian plugin dari webpack.config.js.

Isi File Asli

webpack.config.js

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

route.jsx

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

File yang Diperbarui

webpack.config.js
``` plugin: [
webpack baru.ProvidePlugin({
i18n: "i18selanjutnya",
'_': "lodash",
'angka': "angka",
Bereaksi: "bereaksi",
ReactDOM: "reaksi-dom"
})
],

routes.jsx

impor 'babel-polyfill';
//menggunting
ReactDOM.render(rute, 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",
"nama kelas": "^2.2.5",
"css-loader": "^0.26.0",
"enzim": "^2.6.0",
"fluks": "^3.1.0",
"sejarah": "^4.4.0",
"i18next": "^4.1.0",
"json-loader": "^0.5.4",
"karma": "^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",
"momen": "^2.17.0",
"moka": "^3.1.2",
"zona waktu-momen": "^0.5.9",
"simpul-sass": "^3.13.0",
"angka": "^1.5.5",
"bereaksi": "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",
"sinon": "^1.17.6",
"sinon-chai": "^2.8.0",
"style-loader": "^0.13.1",
"superagent": "^3.0.0",
"vulcan": "git+ ssh://[email protected]/mdsol/vulcan#2.2.2 ",
"webpack": "^1.13.3"
},
```

Apakah Anda memiliki kesempatan untuk mencoba saran saya dari komentar di atas? https://github.com/facebook/react/issues/8379#issuecomment -263962787

@gaearon Saya juga mengalami masalah ini. Saya mempersempitnya menjadi beberapa kombinasi react + babel-polyfill atau babel-plugin-transform-runtime . Saya akan mencoba untuk mendapatkan test case yang dikurangi segera.

Akan sangat membantu jika Anda dapat mengikuti saran saya di atas dan memberi tahu saya temuan Anda.
Terima kasih!

OK di sini adalah perubahan yang saya buat di kedua tempat:

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

Hasil dari chrome:

Hasil dari IE11

Besar! Seperti yang Anda lihat, mereka berbeda. Bisakah Anda sekarang mencoba melihat apa yang membuat Symbol ada dalam satu kasus tetapi tidak yang lain? Mungkinkah polyfill yang Anda muat terlambat?

Saya memperbaikinya dengan menerapkan urutan pemuatan di bundel webpack saya:

1. babel-polyfill
2. reaksi
3. reaksi-dom

Terima kasih atas kesabaran dan kebijaksanaan Anda yang tak terbatas @gaearon

Saya akan menutup ini karena tampaknya ini bukan bug. Sangat disayangkan ini merusak beberapa aplikasi tetapi sangat sulit untuk melindungi dari kasus seperti ini. Secara umum rekomendasi saya adalah Anda harus menjalankan polyfill global sebelum kode lain apa pun dalam bundel . Karena polyfill secara efektif memodifikasi lingkungan, seseorang harus berhati-hati untuk melakukannya secara konsisten.

@damonbauer seluruh babel-polyfill berat, Anda hanya dapat menambahkan simbol polyfill (https://github.com/thejameskyle/babel-react-optimize/issues/16#issuecomment-263519239)

Terima kasih untuk semua orang di utas ini, terutama. @gaearon dan @damonbauer. Jika ini membantu orang lain, berikut adalah perubahan yang akhirnya saya buat:

Ini juga menggigit saya setelah memutakhirkan ke React 15.4 dan saya harus meluangkan waktu untuk mencari tahu. Jadi saya memposting ini untuk membantu orang lain dalam situasi yang sama.

Jika Anda menggunakan react-hot-loader v3 untuk memuat ulang panas di lingkungan DEV, Anda perlu memuat react-hot-loader/patch setelah babel-polyfill melakukannya. Jadi bidang entry Webpack akan terlihat seperti berikut ini agar berfungsi dengan benar dengan react 15.4.x, react-hot-loader v3 dan 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
]

Semoga ini membantu ;)

Hai,

@gaearon , inilah penyelidikan saya untuk menjawab https://github.com/facebook/react/issues/8379#issuecomment -263962787

Menghadapi masalah yang sama, saya mencoba melihat mengapa React.isValidElement tidak mengenali beberapa elemen reaksi.
Melihat melalui kode react dan react-dom, saya pikir tidak ada alasan mengapa react dan react-dom tidak akan setuju dengan apa REACT_ELEMENT_TYPE itu, kecuali jika Anda memerlukan polyfill antara memerlukan reaksi dan reaksi-dom untuk yang pertama waktu. Tetapi mengimpornya bersama-sama seharusnya tidak menimbulkan masalah.

Memang, https://github.com/facebook/react/blob/v15.4.2/src/shared/utils/ReactElementSymbol.js#L17 dideklarasikan pada waktu pemuatan modul dan digunakan di mana saja di perpustakaan. Jadi menghasilkan elemen dengan ReactDOM.render seharusnya tidak menjadi masalah, itu harus berasal dari tempat lain.

Saya akhirnya menemukan bahwa elemen yang menyebabkan masalah dibuat oleh babel-runtime, karena logika dari ReactElementSymbol diduplikasi di sana, tetapi dengan adanya polyfill:
https://github.com/babel/babel/blob/v6.22.0/packages/babel-helpers/src/helpers.js#L20

Ada masalah yang ditutup karena 'tidak akan diperbaiki' pada babel-runtime: https://github.com/babel/babel/issues/2517 karena reaksi tidak akan membagikan variabel REACT_ELEMENT_TYPE .

Dalam kasus saya, saya menduga bahwa masalahnya bukan karena peningkatan kami ke 15.4 tetapi perubahan struktur dalam aplikasi kami. Kita sekarang dapat memahami mengapa kita perlu mengimpor polyfill terlebih dahulu, dan itu karena babel-runtime dan tidak bereaksi.

Semoga ini akan membantu orang lain berada dalam skenario yang sama.

hai @leondragan ,
Saya masih menghadapi masalah dengan pemesanan ulang. Plugin transformasi mana yang harus saya tambahkan di .babelrc ?

Terima kasih

Ini adalah masalah react-hot-loader karena saya hanya memilikinya dalam mode dev dan saya tidak memilikinya dalam mode produksi.
Menambahkan babel-polyfill sebelum react-hot-loader/patch memperbaiki bug ini.

Jika ada orang lain yang menemukan ini, saya menggunakan plugin chunk commons yang memuat reaksi sebelum poli. Untuk menyiasatinya, saya berakhir dengan:

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

Tidak yakin apakah itu cara yang 'benar' tetapi itu adalah satu-satunya cara dengan commons yang saya temukan berhasil.

@andrewdavidcostello terima kasih telah menyelamatkan hari saya :)

Bagi mereka yang memiliki kesalahan, tetapi tidak ada yang berhasil di atas: Saya memiliki kesalahan yang sama persis, tetapi penyebabnya sangat berbeda. Ada kode di mana komponen reaksi dibagikan di antara iframe, tetapi komponen memiliki nilai $$typeof yang berbeda dalam iframe yang berbeda, yang menyebabkan kesalahan. Meskipun ini bekerja dengan browser lain, IE11 memiliki kesalahan.

Saya dapat menjalankan ini hanya dengan memasukkan 'core-js/modules/es6.symbol' SEBELUM 'react' .

'core-js/modules/es6.symbol' jauh lebih kecil dari 'babel-polyfill' sehingga orang lain mungkin ingin mempertimbangkan untuk mencoba ini juga

Saya mencoba semua hal di atas dan tidak ada yang berhasil kecuali tweak pada karya @jkilesc . Jadi urutan impor penting.

Anda akan berpikir skrip entri Anda yang memiliki polyfill di bagian atas akan berbeda daripada memasukkannya sebagai file terpisah dalam larik entri Anda seperti babel-polyfill? Tidak.

Jadi dari

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

ke

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

Mengapa? Selama transpile, urutan perpustakaan tampaknya bergeser sehingga polyfill dimuat setelah Bereaksi? Tapi begitulah. Ini juga berfungsi di mana babel-polyfill pada skrip entri saya tidak.

Ini diharapkan tidak berfungsi:

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

Impor ES diangkat berdasarkan spesifikasi (yang diikuti Babel).
Bahkan jika Anda meletakkan require() sebelum itu, itu akan dieksekusi nanti.

Gunakan aturan serat ini untuk melindunginya dari hal ini di masa mendatang.

Kamu benar. Persis seperti yang akhirnya saya temukan. Alasan saya memposting solusi saya adalah karena ini adalah hasil google nomor satu dan saya mungkin tidak sendirian dalam kurangnya pemahaman tentang internal yang membuat ini berfungsi. Hanya mencoba untuk menyelamatkan orang berikutnya beberapa jam :) Dan terima kasih! Aturan linter itu pasti ditambahkan.

Tentu, terima kasih telah memposting! Saya tidak bermaksud mengatakan Anda tidak mengerti masalah ini. Hanya menunjukkan kepada pembaca masa depan bahwa perilaku ini diharapkan (dan bukan bug di Webpack atau Babel).

Hanya untuk seseorang yang masih menghadapi masalah dengan ini, saya telah memindahkan babel-polyfill ke akhir pada konfigurasi webpack.

Solusi Ditemukan di sini:
https://stackoverflow.com/questions/40897966/objects-are-not-valid-as-a-react-child-in-internet-explorer-11-for-react-15-4-1#comment69150679_40928047

Jadi apa pendekatan terbaik di sini?
Haruskah kita memahami ini adalah masalah dengan urutan pemuatan polyfill tersebut, dan bahwa contoh yang diberikan oleh @notsoluckycharm harus menjadi cara yang tepat?

@qborreda Solusinya adalah memuat babel-polyfill sebelum react dan react-dom .

Untuk pengguna Webpack ini berarti membuat entri utama sebuah array dan elemen pertama dari array akan menjadi babel-polyfill , seperti yang ditunjukkan di sini:
https://github.com/catamphetamine/webpack-react-redux-isomorphic-render-example/blob/4d6208662157cfc6bac115fe5dff956c4976145c/client/webpack/webpack.config.js#L23

Saya mengalami ini ketika menambahkan babel-polyfill ke aplikasi react-redux kami yang dibuat menggunakan template asp.net core 2. Template ini membagi konfigurasi webpack Anda menjadi dua file konfigurasi terpisah ( webpack.config.js dan webpack.config.vendor.js ). Anda perlu memodifikasi array vendor di webpack.config.vendor.js dan meletakkan babel-polyfill di bagian atas agar ini berfungsi.

Saya juga harus sepenuhnya membersihkan lingkungan saya (yaitu menghapus folder wwwroot/dist ) dan membangun kembali proyek agar perubahan dapat diambil dengan benar.

Ini baru mulai terjadi pada saya lagi di minggu terakhir di IE11 (saya telah menyelesaikan bug yang sama ini di masa lalu menggunakan saran di atas).

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

kesalahan:

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

Tidak ada yang berhasil untuk saya, mengubah urutan polyfill atau apa pun.
Apa yang berhasil bagi saya adalah menambahkan tautan JS ini di index.html

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

Setelah menambahkan ini, saya berhasil menjalankan aplikasi reaksi di IE 11

Halo Teman-teman, saya memiliki masalah serupa tetapi kemudian di index.js saya, saya menggunakan