Redark Redark - 1 year ago 175
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": [
"syntax-async-functions"
]
}


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download