Error while parsing es6 import syntax

[aoshi321]

Hi

In my main.s js I am using the import syntax

import './Component.jsx';

When I run 'npm run dev' I get the following error:

ERROR in ./app/main.js
Module parse failed: /Users/aoshi_1/Desktop/test_webpack/app/main.js Line 2: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| 'use strict';
| import './Component.jsx';
|
|

This is my config setup

var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /.jsx$/, // A regexp to test the require path
loader: 'jsx' // The module to load. "jsx" is short for "jsx-loader"
}]
}
};

module.exports = config;

thanks

[bebraw]

You have two options. You can either use jsx?harmony or babel-loader. jsx-loader doesn't work with ES6 by default so you'll need to pass that flag to it.

[aoshi321]

Hi

I have tried the above but Im still getting the same issue.

thanks

[bebraw]

The problem is that your test doesn't match .js. Try test: /.jsx?$/ instead of test: /.jsx$/. That will match both js and jsx.

[aoshi321]

That worked. Thanks for your help

[bebraw]

No probs. I updated the book to include that harmony part. :)

I'm currently working on a project based Webpack book over at https://leanpub.com/survivejs_webpack btw. Still a bit early days with that but feedback could be welcome.

[ghost]

Just a question, where does the harmony flag go? do I need to put it in the html?(can this be avoided?) or in the webpack.config.js?(and where in the config?)

[bebraw]

@zenith-matic jsx-loader is somewhat obsolete. It's far better to use babel-loader these days.

[ghost]

yup I knew that, I was just in desperation mode trying everything to get the es6 modules to play nice with webpack. I somehow managed to fix things.