What is the correct babel configuration to get `async/await` functions working

Question

this is what I have in my babel-options.js file. My app fails to load and without any errors in the console

I also tried updating the presets to [['latest', { loose: true, modules: modules }], 'stage-3], but gulp complained about not being able to find the relative path to latest

babel-options.js

var path = require('path');
var paths = require('./paths');

module.exports = function(modules) {
  return {
    filename: '',
    filenameRelative: '',
    sourceMap: true,
    sourceRoot: '',
    moduleRoot: path.resolve('src').replace(/\\/g, '/'),
    moduleIds: false,
    comments: false,
    compact: false,
    code: true,
    presets: [ ['es2015', { loose: true, modules: modules }], 'stage-1'],
    plugins: [
      'syntax-flow',
      'transform-decorators-legacy',
      'transform-flow-strip-types',
      'transform-async-to-generator'
    ]
  };
};

skeleton pack I'm using: https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext

sample babel-options.js https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-esnext/build/babel-options.js

Did you npm install babel-preset-latest when you updated the config? — loganfsmyth

Trantor Trantor · Accepted Answer · 2017-02-22T11:56:25

I use babel with webpack and async/await works for me. This is my webpack.config.babel.js:

var path    = require( 'path' );
var webpack = require( 'webpack' );
var VersionFile = require('webpack-version-file-plugin');
var wwwPath = path.join(__dirname, 'public/dist');

module.exports = {
entry: {
    preload: [ 'babel-polyfill', './src/main.js' ]
},
cache: true,
debug: true,
devtool: 'source-map',
output: {
    path: path.join( __dirname, 'public/dist' ),
    publicPath: '../public/dist/',
    filename: '[name].js',
    chunkFilename: '[id].js',
    libraryTarget: 'var',
    library: 'ViewerEntryPoint'
},

resolve: {
    root: [
        path.join( __dirname, '..', 'app', 'src' ),
    ],
    alias: {
        jquery$: 'jquery/jquery',
        lodash$: 'lodash/lodash',
        _$: 'lodash/lodash'
    }
},

resolveLoader: {
    root: [
        path.join( __dirname, 'node_modules' )
    ]
},

module: {
    loaders: [
        {
            loader: "babel-loader",

            // Skip any files outside of your project's `src` directory
            include: [
                path.resolve( __dirname, "src" ),
            ],

            // Only run `.js` and `.jsx` files through Babel
            test: /\.jsx?$/,

            // Options to configure babel with
            query: {
                plugins: [ 'transform-runtime' ],
                presets: [ 'es2015', 'stage-0' ] //, 'react'],
            }
        },

        { test: /\.css$/, loaders: [ 'style/useable', 'css' ] },
        { test: /[\/\\]jquery\.js$/, loader: 'exports?window.$' }
    ],
    noParse: [
        /[\/\\]jquery\.js$/
    ]
},
plugins: [
    //new Clean(['dist']),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.SourceMapDevToolPlugin( {
        test: /\.js$/,
        moduleFilenameTemplate: '[absolute-resource-path]',
        fallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]',
        filename: "[file].map",
        sourceRoot: '/src/'
    } ),
    new VersionFile( {
        packageFile: path.join( __dirname, 'package.json' ),
        template: path.join( __dirname, 'version.ejs' ),
        outputFile: path.join( wwwPath, 'version.json' )
    } )
]
};

What is the correct babel configuration to get `async/await` functions working

1 Answers