'Simbol' tidak ditentukan di IE setelah menggunakan babel

Saya memiliki reactjsaplikasi yang ditulis menggunakan standar ES6, dan saya gunakan webpackuntuk membangunnya. The webpackbeban yang jsmodul menggunakan babel-loader. Untuk lebih spesifik, saya menggunakan versi paket berikut: ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

Namun, setelah membangunnya, IE 10 memberikan kesalahan berikut 'Symbol' is undefined. Bukankah babelseharusnya yang mendefinisikan Symbol? Apakah ada konfigurasi khusus untuk webpackatau babelsaya perlu mengatur agar dapat berfungsi? Saya menggunakan {stage: 0}konfigurasi di file.babelrc .

Bantuan apa pun akan dihargai, Terima kasih!

Anda dapat meminta polyfill di titik masuk ke kode Anda agar dapat digabungkan dengan JavaScript lainnya.

Salah satu opsinya adalah menggunakan:

require('babel-polyfill');

Atau:

import 'babel-polyfill';

Semua itu dijelaskan dalam dokumentasi .

Oke, akhirnya saya menemukan bahwa babelsaja tidak ada polyfill. Termasuk skrip <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>memecahkan masalah ini untuk saya.

Solusi ini akan bekerja dengan pasti, itu berhasil untuk saya ketika saya mengalami kesalahan: 'Simbol' tidak ditentukan di IE. Ini bekerja sebelumnya di Chrome dan Firefox tetapi IE melakukan kesalahan ini. Butuh beberapa jam untuk menemukan solusi ini. Saya menggunakan React terbaru saat ini react "react": "^ 16.5.0" pada mesin windows.

1. Install babel-polyfill
npm install --save-dev babel-polyfill
In package.json, it should have the following entries

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-react": "^6.24.1"
  }

2. In index.js, add

    import babelPolyfill from 'babel-polyfill';

Masalah harus diselesaikan

Oke, saya mengalami masalah yang sama, tetapi dalam kasus saya itu sangat berbeda, jadi pada dasarnya Anda perlu memasukkan skrip dalam file indeks seperti di bawah ini:

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

Tetapi dalam kasus saya, saya sudah memasukkannya, setelah beberapa penyelidikan saya menemukan bahwa proxy saya memblokir skrip ...

Jadi pastikan Anda memasukkannya ke dalam index.html dan juga pastikan bahwa Anda memiliki akses ke skrip dari mana Anda membutuhkannya untuk menghindari kesalahan terjadi ... cara terbaik cukup salin dan tempel url di browser ...

Tapi sekarang kita sampai pada poin ini, itu tidak berbicara tentang Simbol itu sendiri, Simbol apa yang tidak dapat dikenali di IE?

Fungsi Symbol () mengembalikan nilai simbol tipe, memiliki properti statis yang mengekspos beberapa anggota objek bawaan, memiliki metode statis yang mengekspos registri simbol global, dan menyerupai kelas objek bawaan tetapi tidak lengkap sebagai konstruktor karena itu tidak mendukung sintaks "Simbol baru ()".

Setiap nilai simbol yang dikembalikan dari Symbol () bersifat unik. Nilai simbol dapat digunakan sebagai pengenal untuk properti objek; ini adalah satu-satunya tujuan tipe data. Beberapa penjelasan lebih lanjut tentang tujuan dan penggunaan dapat ditemukan di entri glosarium untuk Simbol.

Simbol tipe data adalah tipe data primitif.

dalam dokumentasi tentang Runtime

// in bash
npm install babel-transform-runtime --save-dev

// in gulpfile
.pipe(babel({
  plugins: ['transform-runtime']
}))

edit: lebih baik lagi tentang heroku dalam mode prod, gunakan --save daripada --save-dev

Jika Anda mendapatkan kesalahan ini di aplikasi Angular, Anda perlu menghapus komentar baris berikut di polyfills.ts -

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';