core-js: using Symbol causes exception in IE11

core-js version 3 + this code

import "core-js/es/symbol";
Symbol("test");

cause Exception thrown and not caught in IE11 pointing to this line: https://github.com/zloirock/core-js/blob/master/packages/core-js/internals/internal-state.js#L18

debugging shows that isObject(it) part is false.

Webpack output

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["layout"],{

/***/ "./app/javascript/packs/layout.ts":
/*!****************************************!*\
!*** ./app/javascript/packs/layout.ts ***!
\****************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var core_js_modules_es_symbol__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.symbol */ "./node_modules/core-js/modules/es.symbol.js");
/* harmony import */ var core_js_modules_es_symbol__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var core_js_modules_es_symbol_description__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/es.symbol.description */ "./node_modules/core-js/modules/es.symbol.description.js");
/* harmony import */ var core_js_modules_es_symbol_description__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_description__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var core_js_modules_es_symbol_async_iterator__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/es.symbol.async-iterator */ "./node_modules/core-js/modules/es.symbol.async-iterator.js");
/* harmony import */ var core_js_modules_es_symbol_async_iterator__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_async_iterator__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var core_js_modules_es_symbol_has_instance__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/es.symbol.has-instance */ "./node_modules/core-js/modules/es.symbol.has-instance.js");
/* harmony import */ var core_js_modules_es_symbol_has_instance__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_has_instance__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var core_js_modules_es_symbol_is_concat_spreadable__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.symbol.is-concat-spreadable */ "./node_modules/core-js/modules/es.symbol.is-concat-spreadable.js");
/* harmony import */ var core_js_modules_es_symbol_is_concat_spreadable__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_is_concat_spreadable__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var core_js_modules_es_symbol_iterator__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.symbol.iterator */ "./node_modules/core-js/modules/es.symbol.iterator.js");
/* harmony import */ var core_js_modules_es_symbol_iterator__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_iterator__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var core_js_modules_es_symbol_match__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.symbol.match */ "./node_modules/core-js/modules/es.symbol.match.js");
/* harmony import */ var core_js_modules_es_symbol_match__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_match__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var core_js_modules_es_symbol_replace__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core-js/modules/es.symbol.replace */ "./node_modules/core-js/modules/es.symbol.replace.js");
/* harmony import */ var core_js_modules_es_symbol_replace__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_replace__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var core_js_modules_es_symbol_search__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! core-js/modules/es.symbol.search */ "./node_modules/core-js/modules/es.symbol.search.js");
/* harmony import */ var core_js_modules_es_symbol_search__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_search__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var core_js_modules_es_symbol_species__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! core-js/modules/es.symbol.species */ "./node_modules/core-js/modules/es.symbol.species.js");
/* harmony import */ var core_js_modules_es_symbol_species__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_species__WEBPACK_IMPORTED_MODULE_9__);
/* harmony import */ var core_js_modules_es_symbol_split__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! core-js/modules/es.symbol.split */ "./node_modules/core-js/modules/es.symbol.split.js");
/* harmony import */ var core_js_modules_es_symbol_split__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_split__WEBPACK_IMPORTED_MODULE_10__);
/* harmony import */ var core_js_modules_es_symbol_to_primitive__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! core-js/modules/es.symbol.to-primitive */ "./node_modules/core-js/modules/es.symbol.to-primitive.js");
/* harmony import */ var core_js_modules_es_symbol_to_primitive__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_to_primitive__WEBPACK_IMPORTED_MODULE_11__);
/* harmony import */ var core_js_modules_es_symbol_to_string_tag__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! core-js/modules/es.symbol.to-string-tag */ "./node_modules/core-js/modules/es.symbol.to-string-tag.js");
/* harmony import */ var core_js_modules_es_symbol_to_string_tag__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_to_string_tag__WEBPACK_IMPORTED_MODULE_12__);
/* harmony import */ var core_js_modules_es_symbol_unscopables__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! core-js/modules/es.symbol.unscopables */ "./node_modules/core-js/modules/es.symbol.unscopables.js");
/* harmony import */ var core_js_modules_es_symbol_unscopables__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_symbol_unscopables__WEBPACK_IMPORTED_MODULE_13__);
/* harmony import */ var core_js_modules_es_array_concat__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! core-js/modules/es.array.concat */ "./node_modules/core-js/modules/es.array.concat.js");
/* harmony import */ var core_js_modules_es_array_concat__WEBPACK_IMPORTED_MODULE_14___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat__WEBPACK_IMPORTED_MODULE_14__);
/* harmony import */ var core_js_modules_es_json_to_string_tag__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! core-js/modules/es.json.to-string-tag */ "./node_modules/core-js/modules/es.json.to-string-tag.js");
/* harmony import */ var core_js_modules_es_json_to_string_tag__WEBPACK_IMPORTED_MODULE_15___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_json_to_string_tag__WEBPACK_IMPORTED_MODULE_15__);
/* harmony import */ var core_js_modules_es_math_to_string_tag__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! core-js/modules/es.math.to-string-tag */ "./node_modules/core-js/modules/es.math.to-string-tag.js");
/* harmony import */ var core_js_modules_es_math_to_string_tag__WEBPACK_IMPORTED_MODULE_16___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_math_to_string_tag__WEBPACK_IMPORTED_MODULE_16__);
/* harmony import */ var core_js_modules_es_object_to_string__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! core-js/modules/es.object.to-string */ "./node_modules/core-js/modules/es.object.to-string.js");
/* harmony import */ var core_js_modules_es_object_to_string__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_object_to_string__WEBPACK_IMPORTED_MODULE_17__);

Symbol("test");

/***/ })

},[["./app/javascript/packs/layout.ts","runtime","vendors~layout"]]]);
//# sourceMappingURL=layout-4d52b5d1e5b236c62a54.chunk.js.map

Would be happy to provide more info if needed!

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 4
Comments: 40 (15 by maintainers)

Commits related to this issue

Fix support for IE11 in es5 build -Add core-js@3 as a dependency -Add preset-env configurations for core-js in es5 build config -Keep webpack from transpiling core-js and babel libraries (see https:/... — committed to rshatch/pickr by deleted user 5 years ago
fix(webpack): never compile core-js, see https://github.com/zloirock/core-js/issues/514#issuecomment-476541281 — committed to joinbox/build-task by fxstr 5 years ago

Most upvoted comments

@zloirock that was the thing! I’m using webpacker which is in the latest release transpiles node modules.

These changes fix it:

const nodeModulesLoader = environment.loaders.get("nodeModules");
nodeModulesLoader.exclude = [].concat(nodeModulesLoader.exclude || []);
nodeModulesLoader.exclude.push(/core-js/);

Thanks a lot for the help! if it is the same case for @andrewcourtice I would be happy to close the issue

+17

somebody32 on Mar 26, 2019

I fixed it by changing my babel-loader for node_modules to

          {
            test: /\.(js|jsx)$/,
            exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
            use: {
              loader: 'babel-loader',
              options: {
                babelrc: false,
                configFile: path.resolve(__dirname, 'babel.config.js'),
                compact: false,
                cacheDirectory: true,
                sourceMaps: false,
              },
            },
          },

Notice the |core-js added to the exclude field. That did the trick for our setup.

+13

CurtisHumphrey on Aug 21, 2019

removing the isObject(it) check in internal-state.js resolved the issue. The value of it is always a symbol and therefore always fails that check.

IE11 haven’t native symbols. Are you sure that core-js is not transpiled by babel? Babel should not transpile core-js for correct work.

zloirock on Mar 26, 2019

I don’t see why this was closed. This continues to happen. I can confirm, using the same settings op had.

In ie version: 11.0.9600.19301

mihaisavezi on Apr 11, 2019

Fixed it. It was due to the corejs: 3 being passed to ['@babel/plugin-transform-runtime', { corejs: 3 }]. According to core-js creator, the option should be passed to either @babel/preset-env with useBuiltIns: 'entry' OR @babel/plugin-transform-runtime, not both.

I removed { corejs: 3 } from ['@babel/plugin-transform-runtime'] and it started working again. Polyfills were being imported twice, causing duplicates and apparently also errors.

Tarpsvo on Dec 3, 2019

You are explicitly not excluding core-js, since /node_modules\/(?!@myCompany|core-js)/.test(file) will return true for any core-js module.

I suggest using something like this: (assuming that you want to transpile every .js file outside node_modules and only .vue.js files from @myCompany even if in node_modules):

{
    test: /\.js$/,

    loader: "babel-loader",

    exclude: {
      test: /node_modules/,
      not: [
        /@myCompany.*\.vue\.js$/
      ]
    },
}

nicolo-ribaudo on Mar 26, 2019

If it compiles node_modules by default, it might be worth reporting a bug to webpacker asking to also exclude core-js by default.

nicolo-ribaudo on Mar 26, 2019

Sorry, I can’t reproduce it. This code works fine for me:

Maybe the problem in your build process? Maybe you could create a repo with a reproducible example?

zloirock on Mar 25, 2019

import 'core-js/stable'; as I’m using core-js 3.

Tarpsvo on Dec 4, 2019

@Tarpsvo I started troubleshooting this very issue 4 hours ago and a colleague just pointed out your comment to me, which finally fixed it! So thank you!

JoannaG33 on Dec 3, 2019

Hey. Following up with this issue, here’s my idea of a reliable, cross-platform exclusion of core-js:

const isPathInside = require('is-path-inside')
const pkgDir = require('pkg-dir')
const coreJsDir = pkgDir.sync(require.resolve('core-js'))

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
          exclude: (input) => isPathInside(input, coreJsDir),
          use: { loader: 'babel-loader' }
      }
    ]
  }
}

Further, this seems like it should be a default exclusion, doesn’t it? I mean—no-one would ever wanna transpile core-js, right?

To which package(s) should I suggest/request/make a PR for this to be a default exclusion? So many packages 😕.

mightyiam on Jul 17, 2019

@shepmaster I did a PR to webpacker to fix that behavior, hope it’ll get merged soon https://github.com/rails/webpacker/pull/2031

somebody32 on Apr 16, 2019