Module parse failed: es6 react component with JSX inside .JS file

Question

Webpack Babel loader fails when importing an es6 react component with .js as the filename extension. If the filename extension is changed to .jsx babel compiles properly. Any clue?

var config = {
  entry : {
    "login" : PAGE_DIR + '/login/index.js',
    "app" : PAGE_DIR + '/app/index.js'
  },
  output: {
    path: BUILD_DIR,
    filename: '[name]-bundle.js'
  },
  module : {
		rules : [
    	{
        test : /\.(js|jsx)$/,
        include : PAGE_DIR,
				exclude: [
				  path.resolve(__dirname, "node_modules"),
				],
        loaders : ['babel-loader']
      }
		]
  }
};

EDIT:

Updating the logs below.

> webpack -d

Hash: 83d5fd2d0c1113e55b32
Version: webpack 2.2.1
Time: 2057ms
          Asset     Size  Chunks                    Chunk Names
  app-bundle.js  2.28 MB       0  [emitted]  [big]  app
login-bundle.js  1.98 MB       1  [emitted]  [big]  login
  [18] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {0} {1} [built]
  [19] ./~/react/lib/React.js 2.69 kB {0} {1} [built]
  [31] ./~/react/react.js 56 bytes {0} {1} [built]
  [80] ./~/react-dom/index.js 59 bytes {0} {1} [built]
 [109] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} {1} [built]
 [179] ./~/redux/es/index.js 1.08 kB {0} [built]
 [192] ./app/state/store.js 330 bytes {0} [built]
 [193] ./~/react-redux/es/index.js 194 bytes {0} [built]
 [196] ./app/state/reducer.js 766 bytes {0} [built]
 [209] ./~/react-redux/es/connect/connect.js 5.34 kB {0} [built]
 [215] ./~/react-redux/es/utils/Subscription.js 2.59 kB {0} [built]
 [216] ./~/react-redux/es/utils/shallowEqual.js 677 bytes {0} [built]
 [220] ./~/redux-logger/lib/index.js 4.45 kB {0} [built]
 [228] ./app/pages/app/index.jsx 694 bytes {0} [built]
 [229] ./app/pages/login/index.jsx 2.33 kB {1} [built]
    + 215 hidden modules

ERROR in ./app/components/login.jsx
Module parse failed: /Users/vsank1/Documents/workspace/registration/kudumbayogam/app/components/login.jsx Unexpected token (15:6)
You may need an appropriate loader to handle this file type.
|   render () {
|     return (
|       <form className="login">
|         <input type="email" name="emailid" placeholder="Email ID" onChange={this.changeEmailId.bind(this)} /><br/>
|         <input type="password" name="password" placeholder="Password" onChange={this.changePassword.bind(this)} /><br/>
 @ ./app/pages/login/index.jsx 11:13-50

ERROR in ./app/components/app.jsx
Module parse failed: /Users/vsank1/Documents/workspace/registration/kudumbayogam/app/components/app.jsx Unexpected token (30:3)
You may need an appropriate loader to handle this file type.
| 
|     return (
| 			<div className='row'>
| 				<div className='twelve columns'>
| 					<a href='#logout' className='logout button-link'>Logout</a>
 @ ./app/pages/app/index.jsx 15:11-46

Answer 1

I finally figured it out. I had made a mistake by adding an include folder. My components resided outside the include folder and all these components were not getting parsed with the loader. What I found is webpack only parse files which matches the test pattern and is also inside the include folder.

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'client/assets/js');
var APP_DIR = path.resolve(__dirname, 'app/');

var config = {
  entry : {
    "login" : APP_DIR + '/pages/login/index.js',
    "app" : APP_DIR + '/pages/app/index.js'
  },
  output: {
    path: BUILD_DIR,
    filename: '[name]-bundle.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};

module.exports = config;

Answer 2

You may need to install configure presets in you webpack config like

module : {
        rules : [
           {
            test : /\.(js|jsx)$/,
            include : PAGE_DIR,
            exclude: [
                  path.resolve(__dirname, "node_modules"),
            ],
            loaders : ['babel-loader'],
            query: {
                 presets: ['react','es2015', 'stage-0']
             }
            }
        ]
  }

Install them first using

npm install -S babel-preset-es2015 babel-preset-react babel-preset-stage-0