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

latest @babel/runtime + transform-runtime plugin yields "_typeof4.default is not a function" on compiled output #10773

Open
niftylettuce opened this issue Nov 27, 2019 · 9 comments
Labels

Comments

@niftylettuce
Copy link

@niftylettuce niftylettuce commented Nov 27, 2019

  /Users/user/Projects/frisbee/evalmachine.<anonymous>:161

    if (typeof Symbol === "function" && (0, _typeof4.default)(Symbol.iterator) === "symbol") {
                                                             ^

  TypeError: (0 , _typeof4.default) is not a function

_typeof4 is an object that is { default: { } }

It's not a function and it's trying to be invoked.

.babelrc contents:

{
  "presets": [
    [
      "@babel/env", {
        "debug": true,
        "targets": {
          "browsers": "extends @ladjs/browserslist-config"
        }
      }
    ]
  ],
  "plugins": [ "@babel/transform-runtime" ],
  "sourceMaps": "both"
}

Using latest versions of babel/everything.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

@babel-bot babel-bot commented Nov 27, 2019

Hey @niftylettuce! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

@niftylettuce

This comment has been minimized.

Copy link
Author

@niftylettuce niftylettuce commented Nov 27, 2019

Seems related to #8731

@niftylettuce

This comment has been minimized.

Copy link
Author

@niftylettuce niftylettuce commented Nov 27, 2019

The fix described in #8731 worked for me.

@Tarpsvo

This comment has been minimized.

Copy link

@Tarpsvo Tarpsvo commented Nov 28, 2019

Running into the same issue, but the described fix didn't help me.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo commented Nov 29, 2019

@niftylettuce @Tarpsvo What are your input files?

@niftylettuce

This comment has been minimized.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo commented Dec 1, 2019

@niftylettuce This isn't a bug but an unfortunate behavior which isn't really possible to fix, and your "workaround" is the correct way to do it.

A few days ago you changed your browserify command to compile every file
(thus, also your node_modules folder) instead of only your own files (niftylettuce/frisbee@dab1175).

This means that you were also transpiling @babel/runtime.

Consider this helper:

module.exports = function _typeof(obj) {
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) { return typeof obj; };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype
        ? "symbol"
        : typeof obj;
    };
  }
  return _typeof(obj);
}

As you can see, it includes typeof Symbol.iterator === "symbol", which should get transpiled:

var _typeofHelper = require("typeof-helper");

// ...

_typeofHelper(Symbol.iterator) === "symbol"

This causes a circular dependency of the file on itself: the function that it exports needs itself to run. Due to CommonJS's semantics, it causes an "object is not a function" error; which ECMAScript modules you would probably get a "Maximum call stack size exceeded" error.

The only way to avoid this problem is to not transpile the imported helpers, or at least to not transpile them using @babel/plugin-transform-runtime. The same happens to core-js.

@Tarpsvo

This comment has been minimized.

Copy link

@Tarpsvo Tarpsvo commented Dec 2, 2019

I have a huge non-open-source project with the issue. The breaking commit for me was this:
image

Nothing else changed (except package-lock) and nothing I've tried helps.

Babel excludes:

const babelExcludes = /node_modules[\/\\](?!(@optimistdigital[\/\\]create-frontend)[\/\\]).*/; // Exclude everything except create-frontend code

{
    test: /\.(js|mjs)$/,
    exclude: babelExcludes,
    use: [
        {
            loader: require.resolve('babel-loader'),
            options: babelOpts,
        },
    ],
},

Babel ignore:

module.exports = {
    presets: [
        ['@babel/preset-env', { corejs, modules: false, useBuiltIns: 'entry' }],
        '@babel/preset-react',
    ],
    plugins: [
        require.resolve('babel-plugin-dev-expression'),
        require.resolve('@babel/plugin-proposal-object-rest-spread'),
        [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
        [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }],
        require.resolve('@babel/plugin-transform-react-display-name'),
        [require.resolve('@babel/plugin-transform-runtime'), { corejs: 3 }],
        require.resolve('babel-plugin-lodash'),
    ],
    ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/],
};
@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo commented Dec 2, 2019

Without a reproducible demo it's really hard for us to debug the issue 😕

  1. Can you share the stack trace of the error?
  2. ignore shouldn't be needed, since you are already telling webpack not to compile your node_modules except for create-frontend
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.