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 fails to polyfill IE11 for debug module, version 4 #10707

Open
qiulang opened this issue Nov 14, 2019 · 15 comments
Open

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

qiulang opened this issue Nov 14, 2019 · 15 comments
Labels

Comments

@qiulang
Copy link

@qiulang qiulang commented Nov 14, 2019

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 ?

@babel-bot

This comment has been minimized.

Copy link
Collaborator

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

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

@JLHwung

This comment has been minimized.

Copy link
Contributor

@JLHwung JLHwung commented Nov 14, 2019

But why does babel fail to polyfill that ?

By default babel does not transpile the third party codes in node_modules. You may add the ignore config to babel.config.js if you would like to transpile debug module:

ignore: /node_modules\/(?!debug)/
@qiulang

This comment has been minimized.

Copy link
Author

@qiulang qiulang commented Nov 15, 2019

@JLHwung I tried that but it did not work. Actually vue has a transpileDependencies
setting
did the same and you can see I set that in my pakage.json

But anyway I set ignore as you said. I got the same error in IE 11

SCRIPT1002: Syntax error
chunk-vendors.js (4887,1)

/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("/* WEBPACK VAR INJECTION */(function(process) {/* eslint-env browser */\n\n/**\n * This is the web browser implementation of `debug()`.\n */\n\nexports.log = log;

The no static exports found error. But if I switch to debug 3.2.5 it works.

That is why I suspect it maybe a bug.

@JLHwung

This comment has been minimized.

Copy link
Contributor

@JLHwung JLHwung commented Nov 15, 2019

In https://github.com/qiulang/IE11/blob/master/package.json#L55, consider to revise it to

"transpileDependencies": [
      "debug"
    ]

since debug offers a browsers field and debug/index would not match any file.

@qiulang

This comment has been minimized.

Copy link
Author

@qiulang qiulang commented Nov 15, 2019

No I have to use "debug/index" otherwise I will get the error message (I have hit this problem many times!)

"export 'debug' was not found in 'debug'“

WARNING  Compiled with 1 warnings                                                                   

 warning  in ./src/main.js

"export 'default' (imported as 'debug') was not found in 'debug'


  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://10.0.0.132:8081/

and even chrome can not open the page, with the error

Uncaught ReferenceError: exports is not defined
    at Module.eval (browser.js?34eb:7)
    at eval (browser.js:195)
    at Module../node_modules/debug/src/browser.js (chunk-vendors.js:2808)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (main.js:12)
    at Module../src/main.js (app.js:1085)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at Object.1 (app.js:1099)
@qiulang

This comment has been minimized.

Copy link
Author

@qiulang qiulang commented Nov 15, 2019

But anyway I had changed to add ignore in babel.config.js (and delete transpileDependencies) so I don't think it is the reason

@JLHwung

This comment has been minimized.

Copy link
Contributor

@JLHwung JLHwung commented Nov 15, 2019

The transpileDependencies setting is necessary otherwise babel-loader will not feed debug/src/*.js to babel. The ignore config is not necessary because babel-loader is now in charge of what should be processed.

The error ReferenceError: exports is not defined is thrown from https://github.com/visionmedia/debug/blob/608fca962b34e2bda841db9a4416bab6b4a62803/src/browser.js#L7, which should be considered a bug of debug because browser does not ship CommonJS exports.

As a workaround, you can instruct babel to process debug/**/*.js. The trick here is to use overrides options since we have to process commonjs exports, which is different from app codes.

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

This comment has been minimized.

Copy link
Author

@qiulang qiulang commented Nov 15, 2019

Hi I just can't make it work for IE 11, still SCRIPT1002: Syntax error

Can you take a look at my change qiulang/IE11@8331341
to see if I have done anything wrong ?

@JLHwung

This comment has been minimized.

Copy link
Contributor

@JLHwung JLHwung commented Nov 16, 2019

Can you take a look at my change qiulang/IE11@8331341 to see if I have done anything wrong ?

Yep, see qiulang/IE11@8331341#r35974825

@qiulang

This comment has been minimized.

Copy link
Author

@qiulang qiulang commented Nov 17, 2019

Hi, with your help I finally made it work for IE 11. Thanks you very much!

But I still have some questions:

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."

WAIT Compiling...

10% building 0/1 modules 1 active ...es/eslint-loader/index.js??ref--13-0!/Users/qiulang/Dev/ie11/src/main.js
[/Users/qiulang/Dev/ie11/src/main.js] Import of core-js was not found.

But IE still shows my page correctly.

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

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

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

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

@Qix-

This comment has been minimized.

Copy link
Contributor

@Qix- Qix- commented Nov 19, 2019

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.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

@nicolo-ribaudo nicolo-ribaudo commented Nov 19, 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 */ }]
  ]
}]
@christophermiles

This comment has been minimized.

Copy link

@christophermiles christophermiles commented Dec 4, 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.

@qiulang

This comment has been minimized.

Copy link
Author

@qiulang qiulang commented Dec 4, 2019

@christophermiles sadly no, or I will have closed my issue :(

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