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

Possible duplicate of Compile .jsx files instead of .js using babel, this ques is answered very well there check the link. — Mayank Shukla
– Mayank Shukla, Commented Mar 29, 2017 at 10:36
@Mayank No, I get a compile error when I use .js file. If I rename it to .jsx and pass it as the entry it compiles properly. Thanks — Vishnu Sankaran
– Vishnu Sankaran, Commented Mar 29, 2017 at 10:39
did you check this answer stackoverflow.com/a/41815369/5185595 ?? you need to do the changes in webpack.config.js to allow both extensions. — Mayank Shukla
– Mayank Shukla, Commented Mar 29, 2017 at 10:40
Yes, I am aware of it. I am passing this /\.(js|jsx)$/ regex for testing the filename pattern. So, the loader should handle the both .js & .jsx. — Vishnu Sankaran
– Vishnu Sankaran, Commented Mar 29, 2017 at 10:43
tried that. doesnt solve it. ERROR - Module parse failed: Unexpected Token You may need an appropriate loader to handle this file type. — Vishnu Sankaran
– Vishnu Sankaran, Commented Mar 29, 2017 at 10:47

Vishnu Sankaran · Accepted Answer · 2017-03-29 16:25:09Z

5

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;

edited Mar 29, 2017 at 16:25

answered Mar 29, 2017 at 12:02

Vishnu Sankaran

6996 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mayank Shukla Over a year ago

ohh this was the mistake, explanation makes sense :)

Vishnu Sankaran Over a year ago

@MayankShukla Thanks :)

Shubham Khatri · Accepted Answer · 2017-03-29 11:18:49Z

1

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

answered Mar 29, 2017 at 11:18

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

Vishnu Sankaran Over a year ago

I have { "presets" : ["es2015", "react"] } in my .babelrc file. what is stage-0 for?

Vishnu Sankaran Over a year ago

I have installed and added stage-0 also the preset list. Still the same result. Thanks,

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related