Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught TypeError: isObject is not a function (with useBuiltIns: usage) #743

Closed
yvele opened this issue Jan 8, 2020 · 15 comments
Closed

Comments

@yvele
Copy link

yvele commented Jan 8, 2020

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
Copy link
Owner

zloirock commented Jan 8, 2020

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
Copy link
Author

yvele commented Jan 8, 2020

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

image

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 babel/babel-loader#171 and https://stackoverflow.com/q/54156617/1480391

@yvele
Copy link
Author

yvele commented Jan 8, 2020

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
Copy link
Author

yvele commented Jan 8, 2020

I tried to exclude /\bcore-js\b/ as proposed in babel/babel#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
Copy link
Owner

zloirock commented Jan 8, 2020

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
Copy link
Author

yvele commented Jan 8, 2020

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
Copy link
Author

yvele commented Jan 8, 2020

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?

@yvele yvele closed this as completed Jan 8, 2020
@nicolo-ribaudo
Copy link
Contributor

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
Copy link
Author

yvele commented Jan 8, 2020

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
Copy link

kaline commented Apr 2, 2020

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
Copy link
Author

yvele commented Apr 2, 2020

@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
Copy link

mattwelke commented May 26, 2020

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
Copy link

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
Copy link
Contributor

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

@towry
Copy link

towry commented Jul 18, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants