Update to Babel 7.4 and core-js 3 #15139

swissspidy · 2019-04-24T10:26:39Z

Description

Specifies the version of core-js used in the package (Gutenberg uses 2.x at the moment) to prevent warnings.

How has this been tested?

Install wp-scripts in your project.
Try to run some tests
Notice that there's no error anymore.

Screenshots

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

Fixes #15138.

gziolo · 2019-04-24T10:51:42Z

It breaks some of the unit tests related to our Babel preset and one of the Babel plugins:

https://travis-ci.com/WordPress/gutenberg/jobs/195206255#L5966-L6221

FAIL packages/babel-preset-default/test/index.js
  ● Test suite failed to run
    [BABEL] /home/travis/build/WordPress/gutenberg/packages/babel-preset-default/index.js: Invalid Option: corejs is not a valid top-level option.
            Maybe you meant to use 'targets'? (While processing: "/home/travis/build/WordPress/gutenberg/node_modules/@babel/preset-env/lib/index.js")
      at validateTopLevelOptions (node_modules/@babel/preset-env/lib/normalize-options.js:49:13)
      at normalizeOptions (node_modules/@babel/preset-env/lib/normalize-options.js:160:3)
      at _default (node_modules/@babel/preset-env/lib/index.js:168:37)
      at node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
      at loadDescriptor (node_modules/@babel/core/lib/config/full.js:165:14)
      at cachedFunction (node_modules/@babel/core/lib/config/caching.js:33:19)
      at loadPresetDescriptor (node_modules/@babel/core/lib/config/full.js:235:63)
      at config.presets.reduce (node_modules/@babel/core/lib/config/full.js:77:21)
          at Array.reduce (<anonymous>)
      at recurseDescriptors (node_modules/@babel/core/lib/config/full.js:74:38)
FAIL packages/babel-plugin-makepot/test/index.js
  ● babel-plugin › .getExtractedComment() › should not return translator comment on same line but after call expression
    [BABEL] /home/travis/build/WordPress/gutenberg/packages/babel-preset-default/index.js: Invalid Option: corejs is not a valid top-level option.
            Maybe you meant to use 'targets'? (While processing: "/home/travis/build/WordPress/gutenberg/node_modules/@babel/preset-env/lib/index.js")
      at validateTopLevelOptions (node_modules/@babel/preset-env/lib/normalize-options.js:49:13)
      at normalizeOptions (node_modules/@babel/preset-env/lib/normalize-options.js:160:3)
      at _default (node_modules/@babel/preset-env/lib/index.js:168:37)
      at node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
      at loadDescriptor (node_modules/@babel/core/lib/config/full.js:165:14)
      at cachedFunction (node_modules/@babel/core/lib/config/caching.js:33:19)
      at loadPresetDescriptor (node_modules/@babel/core/lib/config/full.js:235:63)
      at config.presets.reduce (node_modules/@babel/core/lib/config/full.js:77:21)
          at Array.reduce (<anonymous>)
      at recurseDescriptors (node_modules/@babel/core/lib/config/full.js:74:38)

nerrad · 2019-04-24T11:14:56Z

The full warning @swissspidy is referring to is:

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.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

I'm think this warning was introduced with a specific version of @babel/core so if one newer than what @wordpress/packages install is used by the parent package this warning starts showing up. I started the same warning in Event Espresso when I updated our @babel/core package to 7.4.3.

I think we should fix the tests to allow this as a top-level option and possibly (if needed) update babel.

Should be noted that currently this is just a warning, jest runs exposing this warning still run fine (for now).

swissspidy · 2019-04-24T11:22:19Z

It is indeed a valid top-level option since Babel 7.4.

Related: babel/babel#9751 / babel/babel#7646

gziolo · 2019-04-24T11:32:54Z

Should we update to Babel 7.4.x and core-js@3 instead? :)

swissspidy · 2019-04-24T11:46:09Z

If it doesn't cause any issues, sure. Let me try it in this PR :-)

nerrad · 2019-04-24T11:48:41Z

A good reference: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md and also: https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2

Worth noting there will be some impact to other packages with the transition.

swissspidy · 2019-04-24T13:13:10Z

I am currently getting this error when running tests:

Cannot find module 'core-js/modules/web.dom.iterable' from 'gutenberg-phase.js'

The module has been renamed in core-js@3, I just don't know where the old one is still referenced 🤔

nerrad · 2019-04-24T13:19:39Z

I think that's being referenced in the @wordpress/gutenberg-phase ~~package~~ (duh its a linting rule - move along nothing to see here.).

nerrad · 2019-04-24T13:27:10Z

I think I recall seeing something like this when I attempted to upgrade to corejs3 in the EE repo. I got as far as uncovering it is related to jest configuration (which would seem to make sense for your error since it happens with a file in the e2e tests).

gziolo · 2019-04-24T13:52:03Z

I think it's an issue with the lock file which installs now many babel related packages as dependencies of dependencies instead of moving them to the top level. I will push fix soon.

gziolo · 2019-04-24T14:00:22Z

With 8c9bc2f applied at least unit tests pass for me locally.

gziolo · 2019-04-24T14:03:30Z

It looks like ESLint isn't happy about new version of Babel:

[2] npm run lint-css exited with code 0
[0] TypeError: Cannot read property 'length' of undefined
[0]     at nthChild (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/esquery/esquery.js:256:34)
[0]     at matches (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/esquery/esquery.js:158:25)
[0]     at matches (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/esquery/esquery.js:76:30)
[0]     at matches (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/esquery/esquery.js:103:25)
[0]     at Function.matches (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/esquery/esquery.js:70:29)
[0]     at NodeEventGenerator.applySelector (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/eslint/lib/util/node-event-generator.js:250:21)
[0]     at NodeEventGenerator.applySelectors (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/eslint/lib/util/node-event-generator.js:280:22)
[0]     at NodeEventGenerator.enterNode (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/eslint/lib/util/node-event-generator.js:294:14)
[0]     at CodePathAnalyzer.enterNode (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/eslint/lib/code-path-analysis/code-path-analyzer.js:632:23)
[0]     at nodeQueue.forEach.traversalInfo (/Users/gziolo/PhpstormProjects/gutenberg/node_modules/eslint/lib/linter.js:750:28)

In the past, I experience similar issues when upgrading Babel. It shouldn't be a breaking change but the reality is that you end up with a cascade of version bumps 😅

gziolo · 2019-04-24T14:26:39Z

Another try in ca77a9d :)

ESLint still throws an error but I can confirm that e2e tests pass.

swissspidy · 2019-04-24T14:27:17Z

That error looks familiar: estools/esquery#67

gziolo · 2019-04-24T14:44:36Z

That error looks familiar: estools/esquery#67

@aduth do you know whether the error thrown by ESLint is coming from the custom rule based on of the no-restricted-syntax rules?

gziolo · 2019-04-30T15:31:51Z

👍 However, should all the packages that received @babel/runtime bumps have changelog entries for that bump?

It looks like @babel/runtime update has nothing to do with core-js and it's version. It's mostly to bring regeneratorRuntime. See related discussion here:
https://github.com/WordPress/gutenberg/pull/9171/files#r214595243

gziolo · 2019-04-30T15:32:50Z

packages/babel-preset-default/index.js

@@ -19,6 +19,7 @@ module.exports = function( api ) {

 		if ( isTestEnv ) {
 			opts.useBuiltIns = 'usage';
+			opts.corejs = 3;


It looks like we enabled corejs v3 only for tests which is expected. Related discussion here: https://github.com/WordPress/gutenberg/pull/9171/files#r214595243

commit 1dddab4 Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Wed May 1 00:00:50 2019 +0300 Have Aztec delete the detected Enter key for paragraphs Aztec-Android doesn't swallow the Enter key (like the list handling does) so, instruct Aztec to delete it for the paragraph block. commit 0936ca0 Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Tue Apr 30 20:58:36 2019 +0300 Just use onFormatChange which now defaults to "force" commit 6358de3 Merge: a5282ce 5e4d627 Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Tue Apr 30 20:23:57 2019 +0300 Merge branch 'master' into rnmobile/fix-list-handling-android commit 5e4d627 Author: Pascal Birchler <pascal.birchler@gmail.com> Date: Tue Apr 30 18:27:24 2019 +0200 Update to Babel 7.4 and core-js 3 (#15139) * Specify core-js version when using useBuiltIns * Update to Babel 7.4 and core-js 3 * setupFiles: fix path to async-iterator * Also update Babel packages in babel-preset-default * Update snapshot for babel-preset-default test * Manually include web.dom-collections.iterator in jest config * Regenerate package-lock.json file after latest changes applied * Upgrade ESLint related npm packages * Another cleanup in the package-lock.json file * Remove ESLint rules which throw error to fix linting * Add core-js/modules/web.dom.iterable to make e2e tests work * Update Babel packages to the latest version * Update ignore files in e2e tests config * Add changelog entries related to Babel and ESLint version bumps commit 1d959ba Author: Andrés <nosolosw@users.noreply.github.com> Date: Tue Apr 30 17:14:35 2019 +0200 Remove not used state (#15224) commit d715e93 Author: Jon Surrell <jon.surrell@automattic.com> Date: Tue Apr 30 16:29:09 2019 +0200 Babel plugin JSX: Implement Fragment handling (#15120) Add imports for `<></>` JSX Fragments. commit 96cad99 Author: Kelly Dwan <ryelle@users.noreply.github.com> Date: Tue Apr 30 09:18:54 2019 -0400 Fix incorrect ID in FocalPointPicker (#15255) commit c1ba13e Author: Jon Surrell <jon.surrell@automattic.com> Date: Tue Apr 30 13:44:50 2019 +0200 Update Fragment imports in READMEs (#15262) Some Fragment imports were incorrect. Fix them. commit 297c2f4 Author: etoledom <etoledom@icloud.com> Date: Tue Apr 30 13:19:34 2019 +0200 RNMobile: Fix autoscroll on ListBlock (#15048) * RNMobile: Add ability to send extra props (i.e. props needed just for mobile) to the list block. * Adding onCaretVerticalPositionChange to RichText via context * Passing onCaretVerticalPositionChange via context to RichText for all RichText based blocks This makes it not necessary to pass onCaretVerticalPositionChange as a prop directly to RichText from the block component. * Update jest snapshot for block-edit commit 447dd27 Author: Jorge Costa <jorge.costa@developer.pt> Date: Tue Apr 30 10:47:55 2019 +0100 Fix copy paste and delete error core paragraph with locking (#14712) * Fix: Copy / Paste error core/paragraph with locking * Add test case. * Update packages/block-library/src/paragraph/edit.js Co-Authored-By: jorgefilipecosta <jorge.costa@developer.pt> commit 0b2eb1c Author: Jon Surrell <jon.surrell@automattic.com> Date: Tue Apr 30 09:39:29 2019 +0200 Dependency extraction webpack plugin: Change option name consistent with docs (#15260) In the docs, an option name was provided as `requestToHandle`, but the actual option in use was `requestToDependency`. Update the code and related tests to use `requestToHandle` as described in the documentation instead of `requestToDependency`. commit 506827e Author: Jon Surrell <jon.surrell@automattic.com> Date: Tue Apr 30 09:31:38 2019 +0200 Read script dependencies from generated files (#15124) * Rework script registration to use generated deps * Deprecate static list of dependencies * Rework translation without packages-dependencies.php * Include build/*/*.deps.json in plugin zip * Add script dependencies undetectable by build tools Some scripts have dependencies that are undetectable by the webpack plugin used to generate the dependency files. Add these dependencies to the generated dependencies. * Add `wp-polyfill` dependency via webpack plugin Enable `injectPolyfill` option in the webpack plugin instead of manually injecting the dependency via PHP on script registration. This will enable the polyfill for consumers of wp-scripts default webpack config. * Improve deprecated message * Remove obsolete lib/packages-dependencies.php commit c2c8276 Author: Daniel Richards <daniel.richards@automattic.com> Date: Tue Apr 30 13:36:49 2019 +0800 Use button block appender on group block (#14943) * Use button block appender on group block * Update group block e2e tests for the new button appender * Add additional margin to the appender when a group has a background color. * Use more opaque versions of the appender background color To ensure greater compatibility when layered on top of a block with a background color. * Block Library: Display ButtonBlockAppender only if selected or empty * Only render button appender when the group has no inner blocks commit 1e96ec7 Author: Andrew Duthie <andrew@andrewduthie.com> Date: Mon Apr 29 16:40:24 2019 -0400 Build Tooling: Pass individual files as arguments from watch to build script (#15219) commit cafb57b Author: Grzegorz (Greg) Ziółkowski <grzegorz.ziolkowski@automattic.com> Date: Mon Apr 29 22:12:08 2019 +0200 Blocks: Upgrade simple-html-tokenizer dependency (#15246) commit 5b3b3ab Author: Andrew Duthie <andrew@andrewduthie.com> Date: Mon Apr 29 13:38:09 2019 -0400 Framework: Add REST API codeowners (#15215) commit 64c48fd Author: Ian Dunn <ian@iandunn.name> Date: Mon Apr 29 10:06:46 2019 -0700 Correct name of `date_i18n()` PHP function. (#15204) commit 8c28814 Author: Andrew Duthie <andrew@andrewduthie.com> Date: Mon Apr 29 13:05:10 2019 -0400 Framework: Remove TESTS.md (#15217) commit 0f1fb57 Author: Emmanuel Hesry <ehesry@gmail.com> Date: Mon Apr 29 17:34:22 2019 +0200 fix typo in withDispatch documentation (#15251) commit a5282ce Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Thu Apr 25 16:08:31 2019 +0300 Revert "Trivial change to trigger Travis" This reverts commit e22ffde. commit e22ffde Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Thu Apr 25 16:08:24 2019 +0300 Trivial change to trigger Travis commit 15a51f8 Author: Jorge Costa <jorge.costa@developer.pt> Date: Fri Apr 19 15:33:15 2019 +0100 chore: Fix: Lint error that makes unit tests (and CI tests) fail. (#15073) commit 2b11074 Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Thu Apr 25 12:42:55 2019 +0300 Fix lint issues commit 9c298c8 Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Thu Apr 25 12:01:46 2019 +0300 Need to specify firedAfterTextChanged on all Aztec events commit 46e086d Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Thu Apr 25 03:59:59 2019 +0300 Force Aztec update if "Enter" fired before text change commit 724e295 Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Thu Apr 25 03:11:52 2019 +0300 Differentiate Android and iOS since assumptions diverged The iOS side still expects to just check against `this.lastContent` to force the change into Aztec. commit 52386fa Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Thu Apr 25 01:55:22 2019 +0300 Use a flag to signal Aztec-originated changes And assume that when that flag is false, component changes need to get sent/reflected down to Aztec. commit c7aa381 Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Tue Apr 23 17:30:45 2019 +0300 Able to not lose content commit 60c75b0 Author: Stefanos Togkoulidis <stefanostogoulidis@gmail.com> Date: Tue Apr 23 10:09:23 2019 +0300 If text already changed, don't modify it

swissspidy added [Tool] Babel preset /packages/babel-preset-default [Tool] WP Scripts /packages/scripts labels Apr 24, 2019

swissspidy requested review from aduth, ajitbohra, gziolo, nerrad, oandregal, ntwb and youknowriad as code owners April 24, 2019 10:26

swissspidy mentioned this pull request Apr 24, 2019

JavaScript Tests, Take 1. ampproject/amp-wp#2176

Merged

7 tasks

gziolo force-pushed the fix/15138-corejs branch from 8c9bc2f to ca77a9d Compare April 24, 2019 14:25

swissspidy changed the title ~~Specify core-js version when using useBuiltIns~~ Update to Babel 7.4 and core-js 3 Apr 24, 2019

swissspidy requested a review from mkaz as a code owner April 24, 2019 14:41

gziolo force-pushed the fix/15138-corejs branch from 460e623 to 27967fc Compare April 24, 2019 15:08

swissspidy requested a review from talldan as a code owner April 25, 2019 11:15

swissspidy and others added 14 commits April 30, 2019 17:17

Specify core-js version when using useBuiltIns

7fc3dd5

Update to Babel 7.4 and core-js 3

7e4d73f

setupFiles: fix path to async-iterator

6066e51

Also update Babel packages in babel-preset-default

e6b581a

Update snapshot for babel-preset-default test

30a790f

Manually include web.dom-collections.iterator in jest config

dc18a37

Regenerate package-lock.json file after latest changes applied

ae75a91

Upgrade ESLint related npm packages

ef64cc6

Another cleanup in the package-lock.json file

80425cd

Remove ESLint rules which throw error to fix linting

56612ff

Add core-js/modules/web.dom.iterable to make e2e tests work

c0ab279

Update Babel packages to the latest version

cdbc0c9

Update ignore files in e2e tests config

bea8550

Add changelog entries related to Babel and ESLint version bumps

45714e1

gziolo reviewed Apr 30, 2019

View reviewed changes

gziolo force-pushed the fix/15138-corejs branch from ee083d0 to 45714e1 Compare April 30, 2019 15:37

swissspidy merged commit 5e4d627 into master Apr 30, 2019

swissspidy deleted the fix/15138-corejs branch April 30, 2019 16:45

youknowriad added this to the 5.7 (Gutenberg) milestone May 10, 2019

aduth mentioned this pull request Jun 7, 2019

Fix: Playground build; Remove @babel/polyfill import from the playground #15947

Merged

jeffstieler mentioned this pull request Jun 12, 2019

Update dependency core-js to v3 woocommerce/woocommerce-admin#2394

Closed

1 task

aduth mentioned this pull request May 20, 2020

Block Editor: Allow control over drop cap feature with useEditorFeature helper #22291

Merged

3 tasks

WraithKenny mentioned this pull request Oct 29, 2020

Restore core-js and useBuiltIns = usage #26576

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to Babel 7.4 and core-js 3 #15139

Update to Babel 7.4 and core-js 3 #15139

swissspidy commented Apr 24, 2019

gziolo commented Apr 24, 2019 •

edited

Loading

nerrad commented Apr 24, 2019 •

edited

Loading

swissspidy commented Apr 24, 2019

gziolo commented Apr 24, 2019

swissspidy commented Apr 24, 2019

nerrad commented Apr 24, 2019 •

edited

Loading

swissspidy commented Apr 24, 2019

nerrad commented Apr 24, 2019 •

edited

Loading

nerrad commented Apr 24, 2019

gziolo commented Apr 24, 2019

gziolo commented Apr 24, 2019

gziolo commented Apr 24, 2019 •

edited

Loading

gziolo commented Apr 24, 2019

swissspidy commented Apr 24, 2019

gziolo commented Apr 24, 2019

gziolo commented Apr 30, 2019

gziolo Apr 30, 2019

Update to Babel 7.4 and core-js 3 #15139

Update to Babel 7.4 and core-js 3 #15139

Conversation

swissspidy commented Apr 24, 2019

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

gziolo commented Apr 24, 2019 • edited Loading

nerrad commented Apr 24, 2019 • edited Loading

swissspidy commented Apr 24, 2019

gziolo commented Apr 24, 2019

swissspidy commented Apr 24, 2019

nerrad commented Apr 24, 2019 • edited Loading

swissspidy commented Apr 24, 2019

nerrad commented Apr 24, 2019 • edited Loading

nerrad commented Apr 24, 2019

gziolo commented Apr 24, 2019

gziolo commented Apr 24, 2019

gziolo commented Apr 24, 2019 • edited Loading

gziolo commented Apr 24, 2019

swissspidy commented Apr 24, 2019

gziolo commented Apr 24, 2019

gziolo commented Apr 30, 2019

gziolo Apr 30, 2019

Choose a reason for hiding this comment

gziolo commented Apr 24, 2019 •

edited

Loading

nerrad commented Apr 24, 2019 •

edited

Loading

nerrad commented Apr 24, 2019 •

edited

Loading

nerrad commented Apr 24, 2019 •

edited

Loading

gziolo commented Apr 24, 2019 •

edited

Loading