Redark Redark - 1 year ago 124
Javascript Question

Issues parsing async functions with webpack

I'm trying to get webpack to parse a javascript file that is using the new async/await syntax, but it keeps giving me a parsing error.

Here is my webpack.config.js file:

module.exports = {
entry: {
foo: './foo.js'
output: {
filename: 'webpack-compiled.js'
module: {
loaders: [
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/

My package.json file:

"name": "async-func-test",
"version": "1.0.0",
"description": "",
"main": "foo.js",
"scripts": {
"buildWithBabel": "babel foo.js --out-file babel-compiled.js",
"buildWithWebpack": "webpack --progress --colors"
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-plugin-syntax-async-functions": "^6.13.0",
"webpack": "^1.13.3"

My babel.rc file:

"plugins": [

And the foo.js file:

async function asyncFunc() {
return 123

asyncFunc().then(x => console.log(x))

If I run the npm script 'buildWithBabel', it runs fine with no errors and creates the babel-compiled.js with the proper output.

However if I run the npm script 'buildWithWebpack', I get the following error message:

ERROR in ./foo.js
Module parse failed: C:\Users\Redark\Desktop\asyncFuncTest\node_modules\babel-loader\lib\index.js!C:\Users\Redark\Desktop\asyncFuncTest\foo.js Unexpected token (1:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:6)

I don't need to transform the async functions, just parse it. I'm not sure why it's not working for webpack as it should using the "syntax-async-functions" plugin in the .babelrc right?

Answer Source

You will need to use the transform-regenerator plugin as well, syntax-async-functions only allows Babel to parse the input (and then leave it alone). Webpack doesn't understand ES8 syntax yet, that's why it fails without having them transpiled.