Core-js: Uncaught TypeError: isObject is not a function (with useBuiltIns: usage)

[yvele]

I'm building my TypeScript project using Webpack and Babel with @babel/preset-env:

{
  module : {
    rules : [{
      test : /\.(js|ts)$/,
      loader : "babel-loader",
      options : {
        babelrc : false,
        cacheDirectory : false,
        sourceType : "unambiguous",
        presets : [
          "@babel/preset-typescript",
          ["@babel/preset-env", {
            modules : false,
            useBuiltIns : "usage",
            corejs : {
              version : "3.6.2",
              proposals : true
            }
          }]
        ],
        plugins : [
          ["@babel/plugin-proposal-class-properties", { loose: true }]
        ]
      }
    }
}

At runtime (with my Chrome browser) I get the following error:

Uncaught TypeError: isObject is not a function

document-create-element.js:7 Uncaught TypeError: isObject is not a function
    at eval (document-create-element.js:7)
    at Object../node_modules/core-js/internals/document-create-element.js (main.js:4057)
    at __webpack_require__ (main.js:70)
    at eval (ie8-dom-define.js:7)
    at Object../node_modules/core-js/internals/ie8-dom-define.js (main.js:4303)
    at __webpack_require__ (main.js:70)
    at eval (object-define-property.js:5)
    at Object../node_modules/core-js/internals/object-define-property.js (main.js:4669)
    at __webpack_require__ (main.js:70)
    at eval (es.object.define-property.js:5)

With the exact same configuration switching from useBuiltIns : "usage" to "entry" everything works perfectly 🤔

I tried multiple versions of core-js v3.6.2, v3.6.0, v3.5.0 and v3.4.8 resulting with the same error.
But with core-js v3.6.1 I get a different runtime error:

Uncaught TypeError: $ is not a function

es.array.index-of.js:16 Uncaught TypeError: $ is not a function
    at eval (es.array.index-of.js:16)
    at Object../node_modules/core-js/modules/es.array.index-of.js (main.js:5560)
    at __webpack_require__ (main.js:70)
    at eval (regexp-exec.js:3)
    at Object../node_modules/core-js/internals/regexp-exec.js (main.js:4926)
    at __webpack_require__ (main.js:70)
    at eval (es.regexp.exec.js:7)
    at Object../node_modules/core-js/modules/es.regexp.exec.js (main.js:6729)
    at __webpack_require__ (main.js:70)
    at eval (indexed-object.js:1)

[zloirock]

It's the problem on your side - it seems it's in your bundling / transpiling process. Seems you transpile core-js, but it should be excluded.

[yvele]

Oh yeah right!

Should all polyfills (including regenerator-runtime/runtime, whatwg-fetch, etc.) never be transpiled by Babel? I still need to transpile other dependencies. Do you agree with that assertion?

I'm excluding core-js using

exclude : /core-js/

But now I get another error in core-js/internal/has.js 🤔

Uncaught TypeError: Cannot convert undefined or null to object

It looks like an error with global.Symbol imported from core-js/internals/global.js being undefined

Uncaught TypeError: Cannot convert undefined or null to object
    at hasOwnProperty (<anonymous>)
    at module.exports (has.js:4)
    at module.exports (well-known-symbol.js:14)
    at eval (set-to-string-tag.js:5)
    at Object../node_modules/core-js/internals/set-to-string-tag.js (main.js:5017)
    at __webpack_require__ (main.js:70)
    at eval (es.symbol.js:35)
    at Object../node_modules/core-js/modules/es.symbol.js (main.js:7224)
    at __webpack_require__ (main.js:70)
    at eval (webpack://PUBLIC_ENGINE/(:8000/webpack)/buildin/global.js?:1:1)

Edit: Related to https://github.com/babel/babel-loader/issues/171 and https://stackoverflow.com/q/54156617/1480391

[yvele]

What exactly should be excluded from transpiling in core-js? Is there a documentation about that?

I think I prefer blacklisting module to exclude from transpilation, instead of whitelisting module to includes 🤔

[yvele]

I tried to exclude /\bcore-js\b/ as proposed in https://github.com/babel/babel/issues/7559 but with no success 🤷‍♂

Looks like other ones are facing the same problem https://stackoverflow.com/q/57361439/1480391

How to exclude core-js using useBuiltIns: “usage”

Once figured out what exactly has to be excluded, may we have some documentation about that?

Note that I made my build running without visible errors (I may be facing errors on some browsers) by whitelisting modules I need to transpile, but this is not a sustainable solution.

[zloirock]

It looks like an error with global.Symbol imported from core-js/internals/global.js being undefined

Please, also make sure that you use only actual versions of core-js - it could be related to a bug from some old versions when used multiple copies of core-js.

[yvele]

Hey @zloirock I found a solution! 🎉 but I'm not sure how to explain it 🤔

I made a console log of ALL dependencies and checked all of them to figure out which one should not be transpiled (in addition to core-js of course).

My code is using the following Webpack "buildin" modules that should also NOT be transpiled:

• webpack/buildin/global.js
• webpack/buildin/amd-options.js
• webpack/buildin/module.js

To fix the problem I made the exclude to be:

exclude : [
  /\bcore-js\b/,
  /\bwebpack\/buildin\b/
]

I'm super happy to have the problem fixed.. but can you help me understand why webpack/buildin should be excluded? And point me a documentation about that.

Edit: Should I exclude all webpack/buildin or only global, amd-options, module.. ?

[yvele]

I'm closing this issue as it's not (?) related to core-js, but I'm still interested to have your expertise on this. Should documentation be added on this subject?

[nicolo-ribaudo]

Probably they should be excluded because webpack injects them in every module it bundles.

So, when you require("core-js/..."),

1. core-js starts loading
2. core-js requires webpack/buildin
3. webpack/buildin starts loading
4. webpack/buildin requires core-js, because it's transpiled
5. core-js is alread loading -> module.exports already exists and it is an empty object (ERROR!)

[yvele]

Thank you for the explanation.

Also FYI, I tried to add @babel/plugin-transform-runtime

// Plugins
plugins : [
  // Require the Babel runtime as a separate module to avoid the duplication
  // https://webpack.js.org/loaders/babel-loader/#babel-is-injecting-helpers-into-each-file-and-bloating-my-code
  ["@babel/plugin-transform-runtime", {
    // Requires @babel/runtime-corejs3
    // https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
    corejs : { version: 3, proposals: true }
  }],
}

And I ran into a similar problem giving me the following error:

Uncaught TypeError: _typeof2 is not a function
    at _typeof (typeof.js:8)
    at eval (sockjs.js:123)
    at Object.eval (sockjs.js:131)
    at eval (sockjs.js:6565)
    at Object../node_modules/sockjs-client/dist/sockjs.js (main.js:13790)
    at __webpack_require__ (main.js:70)
    at eval (webpack://PUBLIC_ENGINE/(:8000/webpack)-dev-server/client/clients/SockJSClient.js?:110:14)
    at Object../node_modules/webpack-dev-server/client/clients/SockJSClient.js (main.js:13874)
    at __webpack_require__ (main.js:70)
    at eval (webpack://PUBLIC_ENGINE/(:8000/webpack)-dev-server/client/socket.js?:56:41)

I solved it by excluding @babel/runtime-corejs3 from the transpilation 😉

Hope that helps someone

[kaline]

Hey @zloirock I found a solution! 🎉 but I'm not sure how to explain it 🤔

I made a console log of ALL dependencies and checked all of them to figure out which one should not be transpiled (in addition to core-js of course).

My code is using the following Webpack "buildin" modules that should also NOT be transpiled:

• webpack/buildin/global.js
• webpack/buildin/amd-options.js
• webpack/buildin/module.js

To fix the problem I made the exclude to be:

exclude : [
  /\bcore-js\b/,
  /\bwebpack\/buildin\b/
]

I'm super happy to have the problem fixed.. but can you help me understand why webpack/buildin should be excluded? And point me a documentation about that.

Edit: Should I exclude all webpack/buildin or only global, amd-options, module.. ?

I don't understand anything about transpilers: I'd like to know where I put that exclude : [
/\bcore-js\b/,
/\bwebpack\/buildin\b/
]
?

[yvele]

@kaline For more details about this solution, see https://stackoverflow.com/a/59647913/1480391

They should be excluded from babel-loader in your Webpack config

{
  module : {
    rules : [{
      test : /\.js$/,
+      exclude : [
+        /\bcore-js\b/,
+        /\bwebpack\/buildin\b/
+      ],
      loader : "babel-loader",
      options: { ... }
   }]
}

[mattwelke]

This may have changed since the most recent comments. I'm having an issue where core-js and/or the webpack component mentioned ("webpack/buildin") is being transpiled when I use the "useBuiltIns": "usage" setting in my Babel config. I get the error "wellKnownSymbol is not a function" in both Chrome and IE 11. I can get my bundle to work in both browsers if I change my Babel config to "useBuiltIns": "entry" and import the entire core-js polyfill in my entry point, but I have concerns over bundle size so I specifically wanted to set up Babel to only add the polyfills I need based on my dependencies.

If anyone's curious, my issue is that my front end code uses schema-inspector, and as of their latest version, they depend on a version of the library async that ES6-ified their code base.

Update:

I get past that error and get a new error when I change the exclude to catch more Webpack modules:

exclude: [
  /\bcore-js\b/,
  /\bwebpack\b/,
],

The new error is Uncaught TypeError: Cannot set property 'wrap' of undefined in the file webpack:///./node_modules/regenerator-runtime/runtime.js.

So then I broadened my excludes further (a separate Stack Overflow includes the idea of whitelisting regenerator-runtime too, so this makes sense to me):

exclude: [
  /\bcore-js\b/,
  /\bwebpack\b/,
  /\bregenerator-runtime\b/, 
],

Again, it gets me past an error, but I get a new one: index.js:1 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'. This error is in one of my source code files (I wrote it in ES6 so I could test transpiling ES6 within node_modules). The code looks like this:

module.exports = {
    /**
     * Prints to console using ES6 features (arrow function, const, string
     * interpolation, spread syntax).
     */
    print: () => {
        const from = 'an arrow function in test-es6-library-dependency';
        const to = 'console';
        const msgObj = {
            to: `the ${to}`,
            ...from,
        };
        console.log(msgObj);
    },
};

(the first line is in my source map is where the error occurs apparently. with source maps disabled, Chrome can't bring me to the exact line that caused the error at runtime)

So at this point, by broadening the Webpack excludes it looks like I've solved the problem with Babel transpiling things it shouldn't when "useBuiltIns": "usage" is used, but now it's not transpiling code it should be (my library code), and I need to figure out why.

[mattwelke]

Got it to work!

My most recent issue was after I excluded enough from the Babel transform, the polyfills seemed to work, but then I wasn't getting some of my dependencies bundled in correctly. It kept the CommonJS export syntax. This is because I was a doing a thorough test, including the package async (which uses ES6+ code, that I needed to be transpiled) and also a few of my own test dependencies, which I published to NPM after including a few ES6 features in each. I used CommonJS syntax to export from them, not realizing that out of the box, Babel can't handle that.

I found that I had to add the line sourceType: 'unambiguous' to my Babel config to get it to recognize the CommonJS modules and include them in the bundle properly. I found this by digging deep into the "Misc" section of Babel's docs.

So for anyone struggling with this again, know that the solution (today, at least), is to have a wide exclude to protect the core-js polyfill and the build tools from transpilation, and to include the line sourceType: 'unambiguous' if you have a mix of ES modules and CommonJS modules that you want to include in your bundle.

[slowcheetah]

@mattwelke thx for posting solution. It may be helpful for someone.

[towry]

Here is my case and solution:

1. use npm link / yarn link to link a local lib.
2. use exclude in webpack babel loader because the lib need to be processed by the webpack.

   {
        test: /\.(jsjsx)$/,
        exclude: function(modulePath) {
          if (
            /node_modules\/local-lib\/.test(
              modulePath
            ) &&
            // make sure to exclude node_modules inside the local lib module.
            !/\blocal-lib\/node_modules\//.test(modulePath)
          ) {
            return false;
          }

          return /(node_modules|bower_components)/.test(modulePath);
        },
        use: {
          loader: "babel-loader",
        },
      },

This error happened because babel use the core-js from the local-lib node_modules, not the root project's.