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

babel-preset-env useBuiltins: 'usage' fails to polyfill all usages for given target #9625

Open
tstirrat15 opened this Issue Mar 3, 2019 · 8 comments

Comments

Projects
None yet
3 participants
@tstirrat15
Copy link

tstirrat15 commented Mar 3, 2019

Bug Report

Current Behavior
We want to target Chrome 41 with babel-preset-env, and preferably leverage useBuiltins: 'usage' to keep bundle size as small as possible.

However, it doesn't seem as though it correctly identifies all necessary polyfills, especially in npm packages. We see TypeError: undefined is not a function errors in our application code when run against Chrome 41. We can fix the issue by switching to useBuiltIns: 'entry', but that increases the bundle size by about 50kb (out of 80kb possible for core-js).

I've been having trouble isolating specific instances of an undefined property, method, or language feature. Is there a recommended way to go about this?

redux-logger is one package that fails to be sufficiently polyfilled, though the import is the compiled version of the package, so it's hard to isolate what exactly is failing. Here's the rollup config if that helps.

Also, we're using babel.config.js and still seeing this issue. Should .babelrc vs babel.config.js have an impact on the behavior of this option?

Input Code
I haven't gotten to a minimal repro yet. I can work on one if it's necessary.

Expected behavior/code
Compiled code with useBuiltIns: 'usage' should execute correctly on Chrome 41.

Babel Configuration (.babelrc, package.json, cli command)

module.exports = {
  plugins: [
    'react-hot-loader/babel',
    'universal-import',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-numeric-separator',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-import-meta',
    '@babel/plugin-proposal-class-properties',
    ['@babel/plugin-transform-runtime', { regenerator: true }],
  ],
  presets: [
    ['@babel/env', { useBuiltIns: 'usage' }],
    '@babel/react',
  ],
  env: {
    production: {
      plugins: [
        [
          'transform-react-remove-prop-types',
          { removeImport: true },
        ],
      ],
    },
  },
};

Environment

  • Babel version(s): v7.3.4
  • Node/npm version: Node 8, npm 6
  • OS: ubuntu, nodejs docker image
  • Monorepo: no
  • How you are using Babel: loader
@babel-bot

This comment has been minimized.

Copy link
Collaborator

babel-bot commented Mar 3, 2019

Hey @tstirrat15! 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.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 5, 2019

We need to know exactly which methods aren't polyfilled. Is the error coming from a dependency?

@tstirrat15

This comment has been minimized.

Copy link
Author

tstirrat15 commented Mar 5, 2019

At least one of the errors is, because the set of errors changes when we remove the dependency. That package is https://github.com/LogRocket/redux-logger/. I've been having trouble identifying the specific usage that causes the error, though, because the chrome debugger points to the minified distribution code at the beginning of the file, and not at any particular usage.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 5, 2019

Ok, if you want Babel to inject polyfills also for your deps, you can either run @babel/preset-env on node_modules or use the include option.

@tstirrat15

This comment has been minimized.

Copy link
Author

tstirrat15 commented Mar 5, 2019

So the default behavior for babel is that it does not transpile node_modules packages?

And I take it the include option would be useful if I knew which plugins/polyfills I needed beforehand? Or is there a way to say "include node_modules" using the include option?

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 5, 2019

So the default behavior for babel is that it does not transpile node_modules packages?

It depends on your webpack config: how are you using babel-loader?

And I take it the include option would be useful if I knew which plugins/polyfills I needed beforehand?

Yeah exactly.

@tstirrat15

This comment has been minimized.

Copy link
Author

tstirrat15 commented Mar 5, 2019

In module.rules:

  test: /\.js/,
  loader: 'babel-loader',
  options: {
    presets: [
      // overriding modules behavior for webpack/terser tree-shaking purposes
      ['@babel/preset-env',
        {
          modules: false,
          targets,
        },
      ],
      '@babel/preset-react',
    ],
  },

This just occurred to me too: do babel and webpack merge the options set here with those set in .babelrc, or are they overwritten?

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

nicolo-ribaudo commented Mar 5, 2019

That config looks correct, and the options are merged.
I think that this could be a real bug then. I know that it is hard, but could you try to isolate the function that throws?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.