deprecates babel/polyfill in favor of core-js@3 #2031

somebody32 · 2019-03-26T11:56:48Z

babel/polyfill is deprecated and using core-js directly is the way now.

This pr adds the required modifications to support core-js@3.
~~I didn't remove babel/polyfill from the dependencies to not make this change breaking.~~

Update: removed babel/polyfill because updating core-js would break old usage anyway, so updating after that PR would require changes to the user's codebase

somebody32 · 2019-03-26T11:57:43Z

package/rules/node_modules.js

@@ -6,7 +6,7 @@ const { nodeEnv } = require('../env')
 module.exports = {
  test: /\.(js|mjs)$/,
  include: /node_modules/,
-  exclude: /@babel(?:\/|\\{1,2})runtime/,
+  exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,


running babel on core-js is causing issues

renchap · 2019-04-01T21:27:49Z

#2031 (comment) : this is important, as this breaks IE11 for any person polyfilling Symbol and using core-js@3.

jakeNiemiec · 2019-04-02T18:07:50Z

Babel PR: babel/babel#7646

jakeNiemiec · 2019-04-02T18:09:56Z

package.json

+    "@babel/plugin-transform-destructuring": "^7.4.0",
+    "@babel/plugin-transform-regenerator": "^7.4.0",
+    "@babel/plugin-transform-runtime": "^7.4.0",
+    "@babel/polyfill": "^7.4.0",


Is this needed?

sorry, needed what? @babel/polyfill? yes, if we remove it, then it is going to be a breaking change

(Disclaimer: I know Babel and core-js pretty well, but not webpacker)

Why would it be a breaking change? Is it exposed to your users or is it only added by webpacker?

@somebody32 The document you linked seems to indicate that it needs to be removed. Apart from that, I feel like this is defenitly a breaking change since users will need to change their pack files.

@nicolo-ribaudo @jakeNiemiec you're right, I for some reason thought that core-js@3 and @babel/polyfill could coexist for some time, but looks like it is not the cause. My idea initially was not to remove @babel/polyfill, so builds which indirectly dependant on it will not be broken, but looks like it is safer to remove it so there will be no strange compatibility problems. I'll change that

connorshea · 2019-04-14T22:58:28Z

We should maybe have a changelog entry written up that has an upgrade guide.

janklimo · 2019-04-18T16:13:12Z

lib/install/config/babel.config.js

@@ -30,6 +30,7 @@ module.exports = function(api) {
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',
+          corejs: 3,
          modules: false,
          exclude: ['transform-typeof-symbol']
        }


@somebody32 This suggests that @babel/plugin-transform-runtime (line 56) can specify to use corejs: 3 as dependency. Were you able to make that work? I'm still seeing errors like these when I make that change:

great point, looks like I need to extend that too (was not using it in our project, that is why didn't spot the problem): https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelruntime

tldr: try to add @babel/runtime-corejs3 package

janklimo · 2019-04-18T16:25:49Z

lib/install/config/babel.config.js

@@ -30,6 +30,7 @@ module.exports = function(api) {
        {
          forceAllTransforms: true,
          useBuiltIns: 'entry',


@gauravtiwari do you think usage should be the new default? From here:

Until Babel 7.3, useBuiltIns: usage was unstable and not fully reliable: many polyfills were not included, and many others were added without their required dependencies. In Babel 7.4, I tried to make it understand every possible usage pattern.

it does look like it's stable now. If I understand it correctly, using usage won't require additional import. When I use:

import "core-js";

in my entry point, I get the following message:

When setting `useBuiltIns: 'usage'`, polyfills are automatically imported when needed. Please remove the direct import of `core-js` or use `useBuiltIns: 'entry'` instead.

I would question that. useBuiltIns: 'usage' is not assuming anything about user's code, just expect to change import core-js to required imports based on supported env, so you need to opt-in in into it by adding that import into one of your packs.
If we switch that to usage, it stops being opt-in and starts automatically adding imports to the code. And from my experience, it still has some edge-cases (because core-js detects relevant import by statically analyzing, so it could not predict what you could have in a runtime), so that creates cases when you still need to add some polyfills by hand.

To summarize: I think useBuiltIns: 'usage' is a safer choice, in general, that is very easy to change if you know what you're doing.

Makes sense 👍

somebody32 · 2019-04-30T16:28:43Z

To be honest, I'm not sure what happened to the specs, looks like a configuration issue, and I believe master branch is failing too

maschwenk · 2019-05-01T07:50:33Z

docs/es6.md


-Don't forget to import `@babel/polyfill` in your main entry point like so:
+Don't forget add these lines into your main entry point:


Suggested change

Don't forget add these lines into your main entry point:

Don't forget to add these lines into your main entry point:

Done, thanks!

PikachuEXE · 2019-05-22T03:54:59Z

Any more action is required for this PR?

somebody32 · 2019-05-22T07:38:21Z

@PikachuEXE reviewing and merging, I believe

gauravtiwari · 2019-05-22T07:44:28Z

Thanks everyone, will review and merge this over the weekend and make a new release.

jaredbeck · 2019-05-23T20:36:41Z

A recent version of babel (perhaps 7.4.5?) now produces a warning about explicitly setting the core-js version.

WARNING: We noticed you're using the useBuiltIns option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the corejs option...

For now, I'm using the following patch ..

       (isProductionEnv || isDevelopmentEnv) && [
         require('@babel/preset-env').default,
         {
           forceAllTransforms: true,
           useBuiltIns: 'entry',
+          corejs: '2',

Does this PR update need to update the webpacker:install rake task accordingly? Sorry if it does already and I'm just not seeing it.

somebody32 · 2019-05-24T08:26:42Z

@jaredbeck it is here: https://github.com/rails/webpacker/pull/2031/files#diff-13f93725bce9fb269a61b40f3f4f10deR33

PikachuEXE · 2019-05-28T01:25:37Z

@gauravtiwari Any plan to review this PR soon?

jakeNiemiec · 2019-05-28T20:59:45Z

Made a PR where I added the upgrade instructions to the changelog, feedback appreciated: #2107

Are there any other outstanding issues with core-js + babel?

@connorshea

Taking @connorshea's suggestion from #2031 (comment) to warn users who were using `@babel/polyfill`

BobbyMcWho · 2019-05-29T15:08:47Z

This change breaks any project using tailwindcss just as an FYI.

$ bin/webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:3035/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /mnt/d/_repos/test-tailwinds-css/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
✖ ｢wdm｣: Hash: c31b9d5f78833e23efd1
Version: webpack 4.32.2
Time: 4254ms
Built at: 05/29/2019 9:54:57 AM
                                     Asset       Size       Chunks             Chunk Names
    js/application-d806edd0e75361e03489.js    646 KiB  application  [emitted]  application
js/application-d806edd0e75361e03489.js.map    563 KiB  application  [emitted]  application
                             manifest.json  364 bytes               [emitted]

ERROR in ./app/javascript/css/application.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function
    at Module../node_modules/webpack/buildin/harmony-module.js (/mnt/d/_repos/test-tailwinds-css/node_modules/css-loader/dist/cjs.js??ref--6-1!/mnt/d/_repos/test-tailwinds-css/node_modules/postcss-loader/src/index.js??ref--6-2!/mnt/d/_repos/test-tailwinds-css/app/javascript/css/application.css:3369:139)
    at __webpack_require__ (/mnt/d/_repos/test-tailwinds-css/node_modules/css-loader/dist/cjs.js??ref--6-1!/mnt/d/_repos/test-tailwinds-css/node_modules/postcss-loader/src/index.js??ref--6-2!/mnt/d/_repos/test-tailwinds-css/app/javascript/css/application.css:21:30)
    at Module../node_modules/css-loader/dist/runtime/api.js (/mnt/d/_repos/test-tailwinds-css/node_modules/css-loader/dist/cjs.js??ref--6-1!/mnt/d/_repos/test-tailwinds-css/node_modules/postcss-loader/src/index.js??ref--6-2!/mnt/d/_repos/test-tailwinds-css/app/javascript/css/application.css:3279:41)
    at __webpack_require__ (/mnt/d/_repos/test-tailwinds-css/node_modules/css-loader/dist/cjs.js??ref--6-1!/mnt/d/_repos/test-tailwinds-css/node_modules/postcss-loader/src/index.js??ref--6-2!/mnt/d/_repos/test-tailwinds-css/app/javascript/css/application.css:21:30)
    at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./app/javascript/css/application.css (/mnt/d/_repos/test-tailwinds-css/node_modules/css-loader/dist/cjs.js??ref--6-1!/mnt/d/_repos/test-tailwinds-css/node_modules/postcss-loader/src/index.js??ref--6-2!/mnt/d/_repos/test-tailwinds-css/app/javascript/css/application.css:3161:28)
    at __webpack_require__ (/mnt/d/_repos/test-tailwinds-css/node_modules/css-loader/dist/cjs.js??ref--6-1!/mnt/d/_repos/test-tailwinds-css/node_modules/postcss-loader/src/index.js??ref--6-2!/mnt/d/_repos/test-tailwinds-css/app/javascript/css/application.css:21:30)
    at /mnt/d/_repos/test-tailwinds-css/node_modules/css-loader/dist/cjs.js??ref--6-1!/mnt/d/_repos/test-tailwinds-css/node_modules/postcss-loader/src/index.js??ref--6-2!/mnt/d/_repos/test-tailwinds-css/app/javascript/css/application.css:85:18
    at Object.<anonymous> (/mnt/d/_repos/test-tailwinds-css/node_modules/css-loader/dist/cjs.js??ref--6-1!/mnt/d/_repos/test-tailwinds-css/node_modules/postcss-loader/src/index.js??ref--6-2!/mnt/d/_repos/test-tailwinds-css/app/javascript/css/application.css:88:10)
    at Module._compile (module.js:652:30)
    at exec (/mnt/d/_repos/test-tailwinds-css/node_modules/mini-css-extract-plugin/dist/loader.js:58:10)
ℹ ｢wdm｣: Failed to compile.

For anyone else who manages to find their way here, you have to remove the corejs: 3 line from your babel.config.js to get successful asset compilation again.

jakeNiemiec · 2019-05-29T15:55:27Z

@BobbyMcWho Thanks for pointing this out. Did you remember to run bundle exec rails webpacker:install since this added new packages? Did you set up webpacker to use tailwind with postcss?

BobbyMcWho · 2019-05-29T16:59:53Z

Yeah, I double checked all the config files, the only thing I could get to fix it was to remove the corejs: 3 line from the babel.config.js, and then it compiled just fine afterward.

I can try and put together a reference app when I have a bit of spare time.

jakeNiemiec · 2019-05-29T18:41:59Z

Possibly related:

Cannot use useBuiltIns with core-js v3 when project used node_modules does't upgrade their babel related modules to v7 babel/babel#10036
ModuleNotFoundError: Module not found: Error: Can't resolve 'core-js/library/fn/object/define-property' babel/babel#9734

@BobbyMcWho Can you:

post as much of the error log as you can
try corejs: 2 in your config. Babel says This gives you the ability to load any version you want, and to update those two packages independently.
does it still happen when not using webpack-dev-server?

BobbyMcWho · 2019-05-29T19:00:14Z

So the issue happens when the assets are compiled using webpack as part of bundle exec rails s on page load, it just displays in the browser console instead. I have figured out that the only place that I need to set corejs: 2 is in the following section of the babel.config.js:

      [
        require('@babel/plugin-transform-runtime').default,
        {
          helpers: false,
          regenerator: true,
          corejs: 2
        }
      ],

This lets tailwindcss styles get compiled just fine.

Edit: Apparently I have to completely remove corejs in the above to get it to work, forgot to save after adding corejs: 2

jakeNiemiec · 2019-05-30T17:53:18Z

I have created a PR to fix this here (works with corejs: 3): #2110

The answer to the problem was that things break when you transpile anything that has to do with transpiling. Picture your modules doing something like this (but poorly):

gauravtiwari · 2019-06-03T08:11:08Z

@jakeNiemiec Perhaps, we remove the corejs option in runtime plugin. Sort of confusing that we have env preset that should take care of everything with corejs enabled but we have similar options available for other plugins. Did you find any difference, if we remove corejs option from runtime plugin?

- Prevents `@babel/plugin-transform-runtime` from rewriting babel helpers in core-js. - Remove unneeded runtime `@babel/runtime-corejs3` cc: #2031, #2109

jakeNiemiec · 2019-06-03T16:30:28Z

Perhaps, we remove the corejs option in runtime plugin.

Fully agree, plus create-react-app followed that same path.

Did you find any difference, if we remove corejs option from runtime plugin?

Setting it to false seems to fix things for quite a few users. I made a PR that implements and documents this fix: #2116

- Prevents `@babel/plugin-transform-runtime` from rewriting babel helpers in core-js. - Remove unneeded runtime `@babel/runtime-corejs3` cc: #2031, #2109

@connorshea

Taking @connorshea's suggestion from rails/webpacker#2031 (comment) to warn users who were using `@babel/polyfill`

- Prevents `@babel/plugin-transform-runtime` from rewriting babel helpers in core-js. - Remove unneeded runtime `@babel/runtime-corejs3` cc: rails/webpacker#2031, rails/webpacker#2109

@connorshea

Taking @connorshea's suggestion from rails/webpacker#2031 (comment) to warn users who were using `@babel/polyfill`

- Prevents `@babel/plugin-transform-runtime` from rewriting babel helpers in core-js. - Remove unneeded runtime `@babel/runtime-corejs3` cc: rails/webpacker#2031, rails/webpacker#2109

somebody32 commented Mar 26, 2019

View reviewed changes

jakeNiemiec reviewed Apr 2, 2019

View reviewed changes

somebody32 mentioned this pull request Apr 16, 2019

using Symbol causes exception in IE11 zloirock/core-js#514

Closed

janklimo reviewed Apr 18, 2019

View reviewed changes

maschwenk reviewed May 1, 2019

View reviewed changes

deprecates babel/polyfill in favor of core-js@3

ac180c7

jakeNiemiec mentioned this pull request May 3, 2019

@babel/polyfill deprecated since babel v7.4.0 #2081

Closed

janklimo mentioned this pull request May 4, 2019

Angular integration installs wrong version of core-js #2070

Closed

jakeNiemiec mentioned this pull request May 6, 2019

Towards the next version v0.3.0 nikushi/minipack#12

Closed

PikachuEXE mentioned this pull request May 28, 2019

Cannot convert object to primitive value with core-js 3.1.3 + webpack zloirock/core-js#566

Closed

gauravtiwari merged commit d701684 into rails:master May 28, 2019

jakeNiemiec mentioned this pull request May 28, 2019

Add changelog entry with @babel/polyfill upgrade instructions #2107

Merged

gauravtiwari pushed a commit that referenced this pull request May 28, 2019

WIP Add changelog entry with upgrade guide. (#2107)

80f3b55

Taking @connorshea's suggestion from #2031 (comment) to warn users who were using `@babel/polyfill`

ankane mentioned this pull request May 29, 2019

Uncaught TypeError: __webpack_require__(...) is not a function - error on fresh app #2109

Closed

jakeNiemiec mentioned this pull request Jun 3, 2019

Do I need to import @babel/polyfill? #1963

Closed

jakeNiemiec added a commit that referenced this pull request Jun 3, 2019

fix: Stop babel from rewriting babel helpers in core-js.

37064df

- Prevents `@babel/plugin-transform-runtime` from rewriting babel helpers in core-js. - Remove unneeded runtime `@babel/runtime-corejs3` cc: #2031, #2109

jakeNiemiec mentioned this pull request Jun 3, 2019

fix: Stop babel from rewriting babel helpers in core-js. #2116

Merged

somebody32 deleted the feature/migrate-to-core-js-3 branch June 11, 2019 07:47

mayordwells mentioned this pull request Jul 15, 2019

Can't get app to compile in a new Angular + Webpacker Application #2180

Closed

KingTiger001 added a commit to KingTiger001/Rails-web-pack-project that referenced this pull request Jan 15, 2023

WIP Add changelog entry with upgrade guide. (#2107)

19ca185

Taking @connorshea's suggestion from rails/webpacker#2031 (comment) to warn users who were using `@babel/polyfill`

smartech7 pushed a commit to smartech7/ruby-webpacker that referenced this pull request Aug 4, 2023

WIP Add changelog entry with upgrade guide. (#2107)

3697abc

Taking @connorshea's suggestion from rails/webpacker#2031 (comment) to warn users who were using `@babel/polyfill`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

deprecates babel/polyfill in favor of core-js@3 #2031

deprecates babel/polyfill in favor of core-js@3 #2031

somebody32 commented Mar 26, 2019 •

edited

Loading

somebody32 Mar 26, 2019

renchap commented Apr 1, 2019

jakeNiemiec commented Apr 2, 2019

jakeNiemiec Apr 2, 2019

somebody32 Apr 3, 2019

nicolo-ribaudo Apr 16, 2019

jakeNiemiec Apr 16, 2019

somebody32 Apr 17, 2019

somebody32 Apr 18, 2019

connorshea commented Apr 14, 2019

janklimo Apr 18, 2019

somebody32 Apr 18, 2019

janklimo Apr 18, 2019

somebody32 Apr 18, 2019

janklimo Apr 18, 2019

somebody32 commented Apr 30, 2019

maschwenk May 1, 2019

somebody32 May 2, 2019

PikachuEXE commented May 22, 2019

somebody32 commented May 22, 2019

gauravtiwari commented May 22, 2019

jaredbeck commented May 23, 2019

somebody32 commented May 24, 2019

PikachuEXE commented May 28, 2019

jakeNiemiec commented May 28, 2019

BobbyMcWho commented May 29, 2019

jakeNiemiec commented May 29, 2019

BobbyMcWho commented May 29, 2019

jakeNiemiec commented May 29, 2019

BobbyMcWho commented May 29, 2019 •

edited

Loading

jakeNiemiec commented May 30, 2019

gauravtiwari commented Jun 3, 2019

jakeNiemiec commented Jun 3, 2019 •

edited

Loading


		Don't forget to import `@babel/polyfill` in your main entry point like so:
		Don't forget add these lines into your main entry point:

	Don't forget add these lines into your main entry point:
	Don't forget to add these lines into your main entry point:

deprecates babel/polyfill in favor of core-js@3 #2031

deprecates babel/polyfill in favor of core-js@3 #2031

Conversation

somebody32 commented Mar 26, 2019 • edited Loading

Choose a reason for hiding this comment

renchap commented Apr 1, 2019

jakeNiemiec commented Apr 2, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

connorshea commented Apr 14, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

somebody32 commented Apr 30, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PikachuEXE commented May 22, 2019

somebody32 commented May 22, 2019

gauravtiwari commented May 22, 2019

jaredbeck commented May 23, 2019

somebody32 commented May 24, 2019

PikachuEXE commented May 28, 2019

jakeNiemiec commented May 28, 2019

BobbyMcWho commented May 29, 2019

jakeNiemiec commented May 29, 2019

BobbyMcWho commented May 29, 2019

jakeNiemiec commented May 29, 2019

BobbyMcWho commented May 29, 2019 • edited Loading

jakeNiemiec commented May 30, 2019

gauravtiwari commented Jun 3, 2019

jakeNiemiec commented Jun 3, 2019 • edited Loading

somebody32 commented Mar 26, 2019 •

edited

Loading

BobbyMcWho commented May 29, 2019 •

edited

Loading

jakeNiemiec commented Jun 3, 2019 •

edited

Loading