« Previous Tutorial Next Tutorial »

Hey everyone, I know this is a bit weird, but a reader recently pointed out that tutorial 45, which came out ages ago, actually breaks production builds. This isn’t really a big deal since we’re not doing production builds right now, but it was nagging at me, so I finally spent a bit of time and hunted down the issue.

As it turns out, it’s very difficult for Babel to transpile ES2017 features if you’re only running the ES2015 plugin. Since async / await is an ES2017 addition, it wasn’t getting transpiled … which is fine in development, since both our server and our browser can run ES2017, but is significantly less fine in production because UglifyJS, which compresses our JavaScript to save file size, has no idea what to do with async and thus gives up while throwing an error. Because we’re using NoEmitOnErrorsPlugin in our Webpack build, this means it doesn’t write out the file at all, even in uncompressed form, which breaks the build (in case you’re new to development, breaking the build is a cardinal sin).

So let’s fix it! Head for a command prompt or terminal window and type

yarn add babel-preset-es2017

Let it run, and then switch over to Sublime. Open up /webpack.config.babel.js and head for line 34. This is our test block for JSX files. It looks like this:

      {
        test: /.jsx?$/,
        exclude: /(node_modules|bower_components|public\/)/,
        loader: 'babel-loader',
      },

Make it look like this:

      {
        test: /.jsx?$/,
        exclude: /(node_modules|bower_components|public\/)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'es2017'],
        },
      },

Then, directly below that block (which ends on line 41), add a near-identical block for JavaScript files, like this:

      {
        test: /.js?$/,
        exclude: /(node_modules|bower_components|public\/)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'es2017'],
        },
      },

You’re done. Save your file, and your production build should now run. That’s it for this mini-tutorial; we can now get back to our regularly-scheduled development tutorials!

« Previous Tutorial Next Tutorial »