Does Laravel Mix support ES8?

Question

I'm compiling my javascript files with Laravel mix, and as I am not very knowledgeable yet on Babel and package.json, I want to ask if Laravel Mix supports ES8, especially async/await?

If I try it, I can't tell if Mix is transpiling async/await to ES5 or if async/await is simply supported by my browser, which is the latest version. I still want it to be transpiled to ES2015 so the application will still works on browsers that only support ES5.

Answer 1

async / await with Laravel Mix:

If you use Laravel Mix out of the Box and use async and await you get the following error message:

Uncaught ReferenceError: regeneratorRuntime is not defined

But Laravel Mix uses Babel to support ES2015. We can customise the compilation if we need to.

To get async / await working, add the file .babelrc to your root directory with this content:

{
  "presets": ["es2015", "stage-3"],
  "plugins": [
    "transform-runtime"
  ]
}

And install the needed npm packages:

npm install babel-preset-es2015 babel-preset-stage-3 babel-plugin-transform-runtime --save-dev

The important thing (which caused the error) is the transform-runtime plugin. It is not shipped with Laravel Mix, but you need it in order to get the async / await feature working.

ES8:

As you have seen above, you can use different preset stages in Babel. With them you can use features that are included in ES8 or later. For example stage-3 brings the async / await feature.

They have an overview of the stages on their website.