Framework: Move @babel/polyfill import to webpack config

[ockham]

For #24788 (which otherwise breaks). Usage in webpack.config.js is documented in official Babel docs.

Testing Instructions

Verify that functionality that isn't present in a browser but provided by the polyfill still works.

In particular, follow testing instructions found in #25419 to make sure we're not introducing a regression here. @jblz I don't have Android Studio installed on my computer, can I ask you to give this a test?

[matticbot]

Test live: https://calypso.live/?branch=move/babel-polyfill-to-webpack-config

[jblz]

@ockham I tried to give it a run on the same setup I used for the other issue and unfortunately, it looks like the init is broken on the UC Mini browser in prod again :(

I/chromium( 2416): [INFO:CONSOLE(113)] "Uncaught SyntaxError: Use of const in strict mode.", source: https://calypso.live/calypso/141.235cace701bed7e16978.min.js (113)
I/chromium( 2416): [INFO:CONSOLE(12)] "Uncaught TypeError: Object [object global] has no method 'AppBoot'", source: https://calypso.live/start?branch=move/babel-polyfill-to-webpack-config (12)

Will try and see if I can get more info.

[jblz]

My gut says this is related to #26120. I'm trying a rebase to see if it fixes it.

[jblz]

My gut says this is related to #26120. I'm trying a rebase to see if it fixes it.

Suspicion confirmed. After rebasing this on master, I'm able to boot Calypso on Android 4.4 / UC Mini and I noticed no regressions.

[ockham]

Awesome, thanks so much @jblz!

[jsnajdr]

@ockham This PR increased the bundle size and reverted the improvements achieved in #25961.

It's because babel-preset-env used to transform the @babel/polyfill import into a list that excludes the polyfills that are not needed on the target browser list. In the new location of @babel/polyfill, the plugin doesn't get the opportunity to do that transform and all polyfills are bundled again.

Is there a way to fix this?

[ockham]

Ouch. Sorry 'bout that, I should've checked ICFY.

I guess we can revert for now. My rationale for filing this PR was #24788, which wouldn't work without this change -- which probably means that babel-present-env is apparently a bit over-eager when it comes to excluding polyfills there. We'll need to find out what exactly is breaking there and fix it 🙁

[jsnajdr]

Here's an idea for a simple fix: create a file client/boot/babel-polyfill.js with just one line:

import '@babel/polyfill';

and then use it in the entrypoint array:

entry: {
  build: [ './client/boot/babel-polyfill', './client/boot/app' ]
}

That simple indirection will make the babel-polyfill.js transpiled by the Babel loader and the preset can do its job.

I didn't test it, so it might not work. Also, it might break Lerna again if the overeager babel-preset-env was really the issue. But let's first try to move forward (create a fix) rather than backward (revert).

[ockham]

Thanks for the suggestion! Unfortunately, that gives the same error as before 🙁

[ockham]

(In combination with #24788 that is -- meaning we might as well revert.)

[ockham]

@jsnajdr found a fix here.