Webpack: Inclusion of .babelrc causes build to fail

Question

OS: Windows 10 Pro
webpack: 2.5.1
node: 6.10.2

So, the inclusion of an .babelrc in the root of my project:

 { "plugins": ["transform-async-to-generator"] } 

causes builds (npm run build) to fail, with the following error message:

 ERROR in ./client/app.js Module build failed: SyntaxError: C:/Users/d0475/Documents/Projects/learn-redux-graphql/client/app.js: Unexpected token (47:2) 45 | */ 46 | render( > 47 | <ApolloProvider store={store} client={client}> | ^ 48 | 49 | <Router history={history}> 50 | <Route path="/" component={App}> 

What is the issue here?

My package.json is:

 "scripts": { "build:webpack": "set NODE_ENV=production && webpack --config webpack.config.prod.js", "build": "npm run clean && npm run build:webpack", "test": "NODE_ENV=production mocha './tests/**/*.spec.js' --compilers js:babel-core/register", "clean": "rimraf public", "start": "node devServer.js" } 

My webpack.config.prod is:

 module.exports = { devtool: 'source-map', context: __dirname, entry: { main: path.resolve(__dirname, './client/app'), }, output: { path: path.join(__dirname, '/public'), filename: '[name]-[hash].js', publicPath: '/' }, plugins: [ new Dotenv({ path: './.env', safe: true }), new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': "'production'" } }), new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }), new HtmlWebpackPlugin({ title: 'Flamingo City', filename: 'index.html', template: './index_template.ejs', }), new CopyWebpackPlugin([ { from: '404.html' }, { from: 'manifest.json' }, { from: 'images', to: 'images' }, ]), new OfflinePlugin({ publicPath: '/', safeToUseOptionalCaches: true, caches: { main: [ 'main-*.js', 'index.html', ], additional: [ ':externals:' ], optional: [ ':rest:' ] }, externals: [ '/' ], ServiceWorker: { navigateFallbackURL: '/', events: true }, AppCache: { FALLBACK: { '/': '/offline-page.html' }, events: true } }) ], module: { rules: [ // js { test: /\\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'client') }, // CSS { test: /\\.styl$/, include: path.join(__dirname, 'client'), use: [ 'style-loader', 'css-loader', 'stylus-loader' ] } ] } }; 

My app.js is:

 import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; import { Router, Route, IndexRoute } from 'react-router' import 'babel-polyfill'; import { ApolloProvider, graphql, gql } from 'react-apollo'; import client from './apolloClient'; import App from './components/App'; import Single from './components/Single'; import PhotoGrid from './components/PhotoGrid'; import css from './styles/style.styl'; import store, { history } from './store'; import Raven from 'raven-js'; import { sentry_url } from './data/config'; if(window) { Raven.config(sentry_url).install(); } import * as OfflinePluginRuntime from 'offline-plugin/runtime'; if (process.env.NODE_ENV === 'production') { OfflinePluginRuntime.install(); } render( <ApolloProvider store={store} client={client}> <Router history={history}> <Route path="/" component={App}> <IndexRoute component={PhotoGrid} /> <Route path="/view/:postId" component={Single}></Route> </Route> </Router> </ApolloProvider>, document.getElementById('root') ); 

npm-debug.log:

 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\\\Program Files\\\\nodejs\\\\node.exe', 1 verbose cli 'C:\\\\Program Files\\\\nodejs\\\\node_modules\\\\npm\\\\bin\\\\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'build' ] 2 info using npm@3.10.10 3 info using node@v6.10.2 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle learn-redux-graphql@1.0.0~prebuild: learn-redux-graphql@1.0.0 6 silly lifecycle learn-redux-graphql@1.0.0~prebuild: no script for prebuild, continuing 7 info lifecycle learn-redux-graphql@1.0.0~build: learn-redux-graphql@1.0.0 8 verbose lifecycle learn-redux-graphql@1.0.0~build: unsafe-perm in lifecycle true 9 verbose lifecycle learn-redux-graphql@1.0.0~build: PATH: C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\node-gyp-bin;C:\\Users\\d0475\\Documents\\Projects\\learn-redux-graphql\\node_modules\\.bin;C:\\Users\\d0475\\Documents\\Cmder\\bin;C:\\Program Files\\Git\\bin;C:\\Program Files\\Git\\usr\\bin;C:\\Program Files\\Git\\share\\vim\\vim74;C:\\Users\\d0475\\Documents\\Cmder\\vendor\\conemu-maximus5\\ConEmu\\Scripts;C:\\Users\\d0475\\Documents\\Cmder\\vendor\\conemu-maximus5;C:\\Users\\d0475\\Documents\\Cmder\\vendor\\conemu-maximus5\\ConEmu;C:\\WINDOWS\\system32;C:\\WINDOWS;C:\\WINDOWS\\System32\\Wbem;C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\;C:\\Program Files (x86)\\GNU\\GnuPG\\pub;C:\\Program Files\\Git\\cmd;C:\\Program Files\\Calibre2\\;C:\\Program Files\\nodejs\\;C:\\Program Files (x86)\\Yarn\\bin;C:\\Users\\d0475\\AppData\\Local\\Microsoft\\WindowsApps;C:\\Program Files (x86)\\Microsoft VS Code\\bin;C:\\Users\\d0475\\AppData\\Local\\Microsoft\\WindowsApps;;C:\\Users\\d0475\\AppData\\Local\\now-cli;C:\\Users\\d0475\\AppData\\Roaming\\npm;C:\\Users\\d0475\\AppData\\Local\\Yarn\\bin;C:\\Users\\d0475\\Documents\\Cmder 10 verbose lifecycle learn-redux-graphql@1.0.0~build: CWD: C:\\Users\\d0475\\Documents\\Projects\\learn-redux-graphql 11 silly lifecycle learn-redux-graphql@1.0.0~build: Args: [ '/d /s /c', 'npm run clean && npm run build:webpack' ] 12 silly lifecycle learn-redux-graphql@1.0.0~build: Returned: code: 1 signal: null 13 info lifecycle learn-redux-graphql@1.0.0~build: Failed to exec build script 14 verbose stack Error: learn-redux-graphql@1.0.0 build: `npm run clean && npm run build:webpack` 14 verbose stack Exit status 1 14 verbose stack at EventEmitter.<anonymous> (C:\\Program Files\\nodejs\\node_modules\\npm\\lib\\utils\\lifecycle.js:255:16) 14 verbose stack at emitTwo (events.js:106:13) 14 verbose stack at EventEmitter.emit (events.js:191:7) 14 verbose stack at ChildProcess.<anonymous> (C:\\Program Files\\nodejs\\node_modules\\npm\\lib\\utils\\spawn.js:40:14) 14 verbose stack at emitTwo (events.js:106:13) 14 verbose stack at ChildProcess.emit (events.js:191:7) 14 verbose stack at maybeClose (internal/child_process.js:886:16) 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5) 15 verbose pkgid learn-redux-graphql@1.0.0 16 verbose cwd C:\\Users\\d0475\\Documents\\Projects\\learn-redux-graphql 17 error Windows_NT 10.0.15063 18 error argv "C:\\\\Program Files\\\\nodejs\\\\node.exe" "C:\\\\Program Files\\\\nodejs\\\\node_modules\\\\npm\\\\bin\\\\npm-cli.js" "run" "build" 19 error node v6.10.2 20 error npm v3.10.10 21 error code ELIFECYCLE 22 error learn-redux-graphql@1.0.0 build: `npm run clean && npm run build:webpack` 22 error Exit status 1 23 error Failed at the learn-redux-graphql@1.0.0 build script 'npm run clean && npm run build:webpack'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the learn-redux-graphql package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error npm run clean && npm run build:webpack 23 error You can get information on how to open an issue for this project with: 23 error npm bugs learn-redux-graphql 23 error Or if that isn't available, you can get their info via: 23 error npm owner ls learn-redux-graphql 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ] 

Answer 1

I abandoned use of the .babelrc file, and in my package.json instead I do the following:

  "devDependencies": { "babel-plugin-transform-async-to-generator": "^6.24.1", ...... }, "babel": { "presets": [ "react", "es2015", "stage-0" ], "env": { "development": { "plugins": [ [ "transform-async-to-generator" ], [ "transform-object-rest-spread" ], [ "transform-react-display-name" ], [ "react-transform", { "transforms": [ { "transform": "react-transform-hmr", "imports": [ "react" ], "locals": [ "module" ] }, { "transform": "react-transform-catch-errors", "imports": [ "react", "redbox-react" ] } ] } ] ] }, "production": { "plugins": [ [ "transform-async-to-generator" ], [ "transform-object-rest-spread" ], [ "transform-react-display-name" ] ] } } },