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)
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.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)
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.
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.
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.module: auto
means “whatever Babel’s caller wants”. Since webpack wants ES modules, in this case auto and false are the same thing.@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.
Note that the suggested configuration can be modified to tell Babel that
debug
already uses CommonJS: