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

@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: { ... }
   }]
}

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.

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.

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.

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… ?

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!)