Webpack-encore: async, await and Babel regenerator runtime

[pribilinskiy]

When I'm trying to use the new async, await structure I got an error in the browser's console

Uncaught ReferenceError: regeneratorRuntime is not defined

How can I start using it with Encore?

Related issue at StackOverflow

[thekonz]

Install babel-polyfill (this is for building full applications, for libraries/packages use babel-plugin-transform-runtime) and then add a shared entry with babel-polyfill:

Encore.createSharedEntry('vendor', ['babel-polyfill']);

[pribilinskiy]

Thanks @thekonz. Resolved by adding

import 'babel-polyfill'

without adding it to package.json nor adding it to the shared entry

Thanks to yarn why babel-polyfill it turned out that bootstrap-vue and opencollective was depending on it so I've added it as you suggested with yarn add babel-polyfill and adding it to the shared entry.
Then I was able to remove the import statement as it's now loaded globally.

[thekonz]

You're welcome.
Don't forget to close the issue ;)

[MatthD]

Hum... is someone could know why when doing something like:

import "@babel/polyfill"; works to load polypill in my app.js

BUT

require("@babel/polyfill"); is not working at all, it should be the same isn't ?

[yfrommelt]

Update from https://babeljs.io/docs/en/babel-polyfill

🚨 As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

import "core-js/stable";
import "regenerator-runtime/runtime";

[rtatarinov4xxi]

You can use solution for documentation, if you extend your babel config.

yarn add -D @babel/plugin-transform-runtime

Then add it plugins to congif:

.configureBabel((config) => {
    config.plugins.push('@babel/plugin-transform-runtime');
})

This solution does not require additional imports to js modules