Support for async/await - ReferenceError: regeneratorRuntime is not defined

[sohailalam2]

@crisbal This is to report an interesting issue.

When I tried to use async/await, I ended up getting an error 500 | Fatal error: ReferenceError: regeneratorRuntime is not defined.

After debugging for a while, I found a solution to make it work -

In order to use await/async we need to install a couple of Babel dependencies.

    npm install --save-dev babel-polyfill
    npm install --save-dev babel-plugin-transform-regenerator

Once installed, we will need to modify the .babelrc file to use the plugin as follows -

    {
        "plugins": ["transform-regenerator"]
    }

and also the webpack.config.js file to use the regenerator as follows -

    require("babel-polyfill");
    
    module.exports = {
      entry: ['babel-polyfill', './src/entry-client.js']
    };

When I did these changes, regeneratorRuntime error was gone and the async/await piece of code worked perfectly.

However, as a side-effect, another very critical problem came to light i.e. hot reloading stopped working at client side.

After some investigation, I came to the conclusion that changing the entrypoint to include the babel-polyfill broke the hot reloading because the entry point app is referenced in setup-dev-server.js file.

webpack.base.config.js

entry: {
    app: './src/entry-client.js'
}

setup-dev-server.js

clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app];

Now the question is how can I fix both these problems to work in harmony?

FYI webpack DOES NOT allow the following format -

entry: {
    app: ['babel-polyfill', './src/entry-client.js']
}

[crisbal]

Thanks for reporting. This might take a while to figure out, I haven't used async/await before. I will start working on this now, let's see if we can fix the issue :)

[crisbal]

Ok I am having some issues with this too. Have you tried importing babel-polyfill as the first thing in src/app.js?

As of right now I am trying to set it up without babel-polyfill and just using babel plugins but it is very difficult to figure out what is going wrong.

Also for the regeneratorRuntime error there is the regenerator-runtime package by Facebook. (I found the package mentioned here)

I think one would have the issue you are reporting even with the official webpack template, see if you get the same error there, if so it could be worth reporting the problem there too.

After 2 hours debugging the only result I have is that I managed the build script to stop crashing badly and just reporting that async (before async function is an unexpected token). I tried every combination of babel's transform/syntax/preset/plugin but I can't manage to get this working.

[sohailalam2]

HI @crisbal

From my report above you will understand that I did manage to get async/await to work using babel-polyfill but it gave rise to a new error - hot reloading stopped working.

Hence, it's not a problem of how to get async/await working, rather how to make changes to your webpack configurations to fix the hot reloading once babel-polyfill is used.

Hope this makes it clear.

Thanks

[crisbal]

Thanks for making it clear. I am having trouble reproducing the issue.

I created src/func.js with this content

async function foo() {
  console.log('async working!')
}
async function bar() {
  await foo()
  console.log('after foo')
}
export default bar

And just by importing it from any other file I get unexpected token async.

I did as you reported and installed the polyfill and the transform-generator, but I can't to get it to compile.

[sohailalam2]

@crisbal

I am not sure what you are doing, but you can easily reproduce it as I did -

To make async/await work, make sure you modify webpack.base.config.js as follows

require("babel-polyfill");
    
module.exports = {
  entry: ['babel-polyfill', './src/entry-client.js']
};

and then use async somewhere in the .vue file or vuex store, such as in Home.vue

<template lang="pug">
	main.view--Home
		h1 Home Page
		p Hello {{name}}!
		p In the showcase you can see some of the features offered by this project
		router-link(to="/showcase") Go to the showcase page
</template>

<script>
export default {
	name: "Home",
	meta() {
		return {
			title: "Home",
			description: "This is the meta description for the home page"
		}
	},
        computed: {
            async name() {
                 setTimeout( () => "Crisbal", 1000);
            }
        }
}
</script>

This should fix get you up and working with async/await, but as soon as you fix it like this, hot reloading in the browser stops working because you have now changed th app reference in the webpack config.

[sohailalam2]

@crisbal any update on this?

[emmanuelAjako]

require("babel-polyfill") module.exports = { entry: { app: ['babel-polyfill', path.join(__dirname, 'src/client/main.js')] }`