babel: @babel/preset-env fails to polyfill IE11 for debug module, version 4

Bug Report

I created a simple app to demo this problem(using vue-cli), https://github.com/qiulang/IE11 If I use debug module v3, IE11 can correctly show the page. But if I use v4 IE shows a blank page.

I don’t know where I did wrong but I suspect this is a bug.

Input Code

Check https://github.com/qiulang/IE11/blob/master/src/main.js Just import debug module

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

Check here for babel setting https://github.com/qiulang/IE11/blob/master/babel.config.js

"@babel/preset-env",
      {
        useBuiltIns: "entry",
        debug: true,
        corejs: 3,
        modules: false,
        targets: {
          chrome: "68",
          ie: "11"
        }
      }

Environment

~ ➤ vue info

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 10.13.0 - /usr/local/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 6.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.97
    Firefox: 70.0.1
    Safari: 13.0.3
  npmGlobalPackages:
    @vue/cli: 4.0.5

Additional context/Screenshots

From here socketio/socket.io-client#1328 (comment) it said

This happened after updating debug from v3 to v4 which uses spread operator in its distributable.

But why does babel fail to polyfill that ?

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 23 (11 by maintainers)

Most upvoted comments

which should be considered a bug of debug because browser does not ship CommonJS exports.

53 million downloads a week and 1 user has a problem with their bundler != a bug in debug. I already get a bunch of spam over there, I don’t need any more fuel added to that fire.

Most bundlers for the browser support CJS bundling. It’s either that or we move to ESM exports at debug which will cause a horde of angry users with "debug": "*" in their package.json files blaming me for breaking their apps.

It’s one of those situations where I need to pick my battles. debug does not have a bug w.r.t how it exports things - there is nothing actionable there.

Qix- on Nov 19, 2019

Yep. The problem reported in this issue is connected with not transpiling whole node modules. Even if the export of debug was changed, you’re going to get the same error from different package.

To transform whole node modules instead of just your app change .babelrc to babel.config.js and configure your webpack accordingly. https://babeljs.io/docs/en/configuration#whats-your-use-case

Apart from fixing this issue you’ll have more flexibility in how you ship your apps (i.e. prepare different bundles for modern and old browsers)

dominiczaq on Feb 1, 2020

I agree that this is not a debug bug, but a problem with how Babel has been configured.

If you configure Babel to transpile node modules but it still isn’t working, please provide a minimal repository I can clone to investigate.

Since the original one has been fixed by @JLHwung I’m going to close this issue, but feel free to attach a reproduction here.

nicolo-ribaudo on Feb 2, 2020

The issue I had was the use of debug as a dependency in the socket.io-client module. Downgraded the module to 1.6.0 and it resolved.

Have also since read that downgrading to debug@3.2.6 works.

ghost on Jan 31, 2020

I am having the exact same problem as described. The debug package is not compiling in babel to rid it of those arrow functions and let declarations. Breaks the application in IE11.

ghost on Jan 31, 2020

module: auto means “whatever Babel’s caller wants”. Since webpack wants ES modules, in this case auto and false are the same thing.

nicolo-ribaudo on Nov 17, 2019

1. Do I need to import "core-js"; in my main.js or not ?

If I do not import it, babel complains “Import of core-js was not found.”

What confused me more is if I import "@babel/polyfill" instead of import "core-js" (as many articles I googled) babel said Please remove the direct import of core-js

@babel/polyfill is deprecated. Please, use required parts of core-js and regenerator-runtime/runtime separately When setting useBuiltIns: 'usage', polyfills are automatically imported when needed. Please remove the direct import of core-js or use useBuiltIns: 'entry' instead.

2. Should I set modules:false or modules: auto in "@babel/preset-env" ? I find either one works, but I also remember I read some articles saying webpack expect it to be false.

I read though this babel/babel-loader#521 and still don’t get a clue

3. Do I need “@vue/cli-plugin-babel/preset” or not ? It seems to work when I do not add it in presets array

@qiulang Did you get answer to any of these questions? Especially question 1? I am struggling with something similar and am finding the documentation extremely confusing and contradictory.

christophermiles on Dec 4, 2019

Note that the suggested configuration can be modified to tell Babel that debug already uses CommonJS:

overrides: [{
  test: "./node_modules/debug/**/*.js",
  sourceType: "script",
  presets: [
    ["@babel/preset-env", { /* other options */ }]
  ]
}]

nicolo-ribaudo on Nov 19, 2019