javascript - Vue.js not loading on IE11 with error 'Symbol' is undefined - Stack Overflow

admin管理员组

文章数量:1315369

Using Vue.js on my webapp work on most browsers, except IE11. I tried the default babel-preset-es2015, also tried the babel-preset-es2015-ie, but no luck: the code still not running on IE11 with 'Symbol' is undefined error.

.babelrc

{
  "presets": ["es2015"]  << also tried es2015-ie
}

package.json

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 3000 --host 0.0.0.0",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "bootstrap-loader": "^1.3.2",
    "jquery": "^3.1.1",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "vue": "^2.1.6"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^1.0.6",
    "css-loader": "^0.23.1",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "imports-loader": "^0.7.0",
    "json-loader": "^0.5.4",
    "node-sass": "^4.0.0",
    "resolve-url-loader": "^1.6.1",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^9.8.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

Using Vue.js on my webapp work on most browsers, except IE11. I tried the default babel-preset-es2015, also tried the babel-preset-es2015-ie, but no luck: the code still not running on IE11 with 'Symbol' is undefined error.

.babelrc

{
  "presets": ["es2015"]  << also tried es2015-ie
}

package.json

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 3000 --host 0.0.0.0",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "bootstrap-loader": "^1.3.2",
    "jquery": "^3.1.1",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "vue": "^2.1.6"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^1.0.6",
    "css-loader": "^0.23.1",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "imports-loader": "^0.7.0",
    "json-loader": "^0.5.4",
    "node-sass": "^4.0.0",
    "resolve-url-loader": "^1.6.1",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-loader": "^9.8.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

• javascript
• webpack
• vue.js

Share Improve this question Follow asked Dec 16, 2016 at 13:40 Augusto GoncalvesAugusto Goncalves 8,60422 gold badges1818 silver badges4444 bronze badges 1

• Possible duplicate of 'Symbol' is undefined in IE after using babel – Lionia Vasilev Commented Dec 16, 2016 at 14:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

As pointed by @Leonid, I was missing browser-polyfill script, as described by this answer. Working fine now on IE11 (and other browsers).

Here is what I did:

npm install --save-dev babel-polyfill

webpack.config.js

module.exports = {
  entry: ['babel-polyfill', './src/main.js'],
  ....
  ....
}

I'll rather prefe updating webpack.mix.js instead. Then using the updated version of @babel/polyfill and babel-loader. And these @babel/core babel-preset not necessary. corejs 3 is more recent version but cant seem to work it out. Please anyone knows how to make import core-js/stable work, lemme know!

With NPM:

npm install babel-loader @babel/polyfill --save

webpack.mix.js

module: {
      rules: [{
          test: /\.js?$/,
          exclude: /(bower_ponents)/,
          use: [{
              loader: 'babel-loader',
              options: mix.config.babel()
          }]
      }]
  }

And finally import @babel/polyfill at the beginning of your main/js or app.js file

import '@babel/polyfill';

Dependencies:

"@babel/polyfill": "^7.10.4",
"babel-loader": "^8.1.0",
"vue": "^2.6.11",

本文标签： javascriptVuejs not loading on IE11 with error 39Symbol39 is undefinedStack Overflow