Parse Failure When Using File with ES6 Syntax as Webpack Entry Point

Question

I'm trying to use Webpack to transpile some source files written using ES6 syntax and JSX. However, when I run the Webpack command, I get the following error.

ERROR in ./app/App.jsx
Module parse failed: ./app/App.jsx Line 5: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
| 
| import React from 'react';
| import { RouteHandler } from 'react-router';
| 
 @ multi main

As you'll see below, I'm using the babel-loader, yet it seems to me that the loader isn't able to handle the 'import' syntax. Any idea why this might be happening?

Here's a look at our basic file structure.

--/app
----/components
------/shared
--------NavigationBar.js
----App.jsx
--webpack.config.js
--package.json

Here's our package.json file.

// package.json

{
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
  },
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "history": "^1.13.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.0"
  }
}

Here's our webpack.config.js file.

// webpack.config.js

module.exports = {
  context: __dirname + '/app',
  entry: './App.jsx',

  output: {
    filename: 'app.js',
    path: __dirname + '/dist',
  },

  module: {
    loaders: [
      {
        test: /\.js?$/,
        loaders: ['react-hot', 'babel'],
        exclude: /node_modules/
      }
    ]
  },

  resolve: {
    extensions: ['', '.js', '.jsx']
  },
};

And finally, here's /app/App.jsx

// App.jsx

'use strict';

import React from 'react';
import { RouteHandler } from 'react-router';

import NavigationBar from './components/shared/NavigationBar';

class App extends React.Component {
  render() {
    return (
      <div>
        <NavigationBar />
        <RouteHandler />
      </div>
    );
  }
}

export default App;

Let me know if you need any more information to diagnose the problem. Thanks in advance for the help.

Possible duplicate of [Babel file is copied without being transformed](http://stackoverflow.com/questions/33440405/babel-file-is-copied-without-being-transformed) — loganfsmyth, Nov 23 '15 at 23:49
This question is asked almost daily. It shouldn't be difficult for you to find relevant information using the search or browsing the babeljs tag. — Felix Kling, Nov 24 '15 at 14:42
@FelixKling I actually had tried this solution, and it didn't fix the problem. Since the problem wasn't resolved after specifying the presets, I removed them. After some more intense visual inspection of my code in the webpack config file, I also discovered that I had a typo in the regex test for file extensions. You see, my entry point was app/App.jsx, but the regex test `/\.js?$/` didn't match the .jsx extension. So my entry point wasn't being transpiled. After fixing that, I discovered that the missing presets were also a problem. Thanks for the help though, everyone. — Brandon, Nov 24 '15 at 20:25

score 0 · Accepted Answer · answered Nov 24 '15 at 06:23

Starting from Babel 6 you need to declare the presets manually, check this.

Basically, in the root of your project you need a .babelrc with the following content:

{
  "presets": [ "es2015", "react" ]
}

And the corresponding npm modules in package.json:

// package.json

{
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
  },
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "history": "^1.13.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.0"
  }
}

score 0 · Answer 2 · answered Jan 05 '16 at 02:10

Banged my head against this for a while too! My problem ended up being similar. The JS file I was working in wasn't actually being picked up by webpack.

In my case, I was developing in a new source directory I hadn't told webpack about. To tell it, I just had to add another entry to the include key of my Babel-ified JS loader configuration.

loaders: [
  {
    test: /\.js$/,
    loaders: ['babel?' + JSON.stringify({
      plugins: ['transform-runtime', 'transform-decorators-legacy'],
      presets: ['es2015', 'stage-0', 'react'],
    })],
    include: [
      path.join(__dirname, 'src'),
      path.join(__dirname, 'another_source_directory')], // <-- this
  }
]

Parse Failure When Using File with ES6 Syntax as Webpack Entry Point

2 Answers2