Node JS Webpack Babel with async

Question

When trying to compile my server-side code, I get the following error:

Module parse failed: (...babel-loader-path)?{"presets":["es2015-node4","es2015"]} (...) Unexpected token (86:6)
You may need an appropriate loader to handle this file type.

This error seems to be caused by an Async function that I am trying to import. Do I need to change my webpack configuration?

My webpack config file:

 const webpack = require('webpack'); module.exports = { target: 'node', entry: ['./server/index.js', './node_modules/webpack/hot/poll?1000'], output: { path: './dist', filename: 'server.bundle.js', libraryTarget: 'commonjs', }, resolve: { extensions: ['', '.js', '.jsx'], }, externals: [/^[az]/], module: { loaders: [{ test: /\\.jsx$/, loader: 'babel-loader', query: { presets: ['react', 'es2015-node4', 'es2015'], }, }, { test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015-node4', 'es2015'], }, } ], }, plugins: [ new webpack.HotModuleReplacementPlugin(), ], devtool: 'source-map', };

Answer 1

If you are using Webpack to compile your Node code, then that is not a good approach. You should simply use babel-node which is an amazing way to transpile your node code.

For that in your package.json do the following

"scripts": {
  "dev": "node_modules/.bin/nodemon --exec babel-node server/index.js",
  "prestart": "node_modules/.bin/babel server --out-dir dist",
   "start": "node dist/index.js"
},
"devDependencies": {
   "@babel/cli": "^7.0.0-beta.40",
   "@babel/core": "^7.0.0-beta.40",
   "@babel/node": "^7.0.0-beta.40",
   "@babel/preset-env": "^7.0.0-beta.40",
   "@babel/preset-stage-2": "^7.0.0-beta.40",
   "nodemon": "^1.11.0"
}

In your .babelrc file, do the following.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-stage-2"
   ]
}

Then in your project directory create a folder called server and in that folder create a file called index.js which creates your node http server.

For a reference have a look at Babel-Node Documentation Or have a look at this amazing small tutorial kind of example created by the awesome folks at Babel Example Node Server Using Babel-Node

PS: In the package.json file the npm run dev watches your code and npm start commands compiles your code ready to be shipped for production.

Answer 2

There seems to be a mis-understanding with regard to the babel preset usage. The preset you want is not the target version of javascript you want to output. For that you need to set target appropriately. Instead you needed the preset that corresponds to the version of javascript you are writing in. The presets are collections of transformers that instruct babel how to deal with specific javascript constructs. In babel <=6 you need either: es2017 or transform-async-to-generator presets to use the async keyword. After babel 7 the recommendation is to use:

{
  "presets": ["@babel/preset-env"]
}

This allows babel to support all modern java-script syntax's that have been finalized. It will then transpile to whatever syntax your target setting indicates. I personally would use a browserslist query in package.json for this so other tools like postcss automatically pick up the same target information.