Line 1: Unexpected reserved word

[vincenzo-antolini-os]

Hi, the following javascript code

import React from 'react';

export default React.createClass({
  render: function () {
    return React.createElement('h1', null, 'Hello world');
  }
});
;

found in https://github.com/christianalfoni/react-webpack-cookbook/wiki/Configuring-react-js

gives me the following error when launching webpack

ERROR in ./app/Component.js
Module parse failed: C:\inetpub\wwwroot\webpack\app\Component.js Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from 'react';
|
| export default React.createClass({
 @ ./app/main.js 3:16-41

Can you help me? I'm a noob ;)

[bebraw]

Did you set up jsx loader as instructed in the next section?

Alternatively you can install babel-loader and something like

{
    test: /\.jsx?$/,
    loader: 'babel'
}

in your Webpack configuration. You can see how my boilerplate does it.

I have explained the React bits in more detail at my new book btw.

[vincenzo-antolini-os]

I used jsx-loader (harmony option) as reported here https://github.com/christianalfoni/react-webpack-cookbook/wiki/Configuring-react-js

test: /\.jsx$/,
loader: 'jsx?harmony' // The module to load. "jsx" is short for "jsx-loader"

Argh!, confusion is the worst enemy when starting... :| I'm not sure that is the problem.

[bebraw]

@vincenzo-antolini-os Can you try babel loader instead? npm i babel-loader --save-dev + replace jsx?harmony with babel.

[bebraw]

@vincenzo-antolini-os I can see it now. The problem has to do with your test. It doesn't match jsx (just js). Change it to format /\.jsx?$/.

[vincenzo-antolini-os]

yeah! I see the question mark that changes the regexp! But It doesn't resolve:

ERROR in ./app/Component.js
Module build failed: Error: Parse Error: Line 3: Illegal export declaration
    at throwError (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\node_modules\jstransform\node_modules\esprima-fb\esprima.js:2813:21)
    at throwErrorTolerant (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\node_modules\jstransform\node_modules\esprima-fb\esprima.js:2825:24)
    at parseSourceElement (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\node_modules\jstransform\node_modules\esprima-fb\esprima.js:6387:17)
    at parseProgramElement (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\node_modules\jstransform\node_modules\esprima-fb\esprima.js:6446:16)
    at parseProgramElements (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\node_modules\jstransform\node_modules\esprima-fb\esprima.js:6478:29)
    at parseProgram (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\node_modules\jstransform\node_modules\esprima-fb\esprima.js:6491:16)
    at Object.parse (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\node_modules\jstransform\node_modules\esprima-fb\esprima.js:7653:23)
    at getAstForSource (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\node_modules\jstransform\src\jstransform.js:251:21)
    at transform (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\node_modules\jstransform\src\jstransform.js:274:11)
    at innerTransform (C:\inetpub\wwwroot\webpack\node_modules\jsx-loader\node_modules\react-tools\main.js:94:10)
 @ ./app/main.js 3:16-41

babel compile but I'm not sure it works, all is confused, it is no linear, no consistent! I'll try to start again from the beginning!

Thanks! :+1:

[bebraw]

@vincenzo-antolini-os Can you push the project somewhere so I can have a better look?

[bebraw]

FYI, I converted the cookbook to use babel loader too. I already did this in my book. I don't see much point in jsx-loader anymore as babel-loader is so much better.

[vincenzo-antolini-os]

Ok for babel (In Sublimetext is preferred to highlight jsx code).

Babel compiles but the resulting bundle doesn't work.

I used this code (ES6?):

import React from 'react';
export default React.createClass({
  render: function () {
    return React.createElement('h1', null, 'Hello world');
  }
});
; // <- ?

from https://github.com/christianalfoni/react-webpack-cookbook/wiki/Configuring-react-js

main.js is

'use strict';
var Component = require('./Component.js'); // CommonJS ?
document.body.appendChild(Component());

I followed the flow of informations and source code from your cookbook. I'm restarting from the beginning.

It is so simple that it must work...

Thanks

[bebraw]

The problem is that main.js doesn't render the JSX. Let me change this.

[bebraw]

The chapter contains a complete examples of index.html and app.js now. Note that I go into a lot more detail in my book. It's more beginner/tutorial oriented than this.

[vincenzo-antolini-os]

:+1:

[vincenzo-antolini-os]

I think that a change is necessary...

import React from 'react';
import Component from './component';
main();
function main() {
    React.render(<Component />, document.getElementById('app'));
}

to

import React from 'react';
import Hellow from './component';
main();
function main() {
    React.render(<Hellow />, document.getElementById('app'));
}

[bebraw]

@vincenzo-antolini-os I tweaked it that way to be more consistent.

In practice it doesn't matter what you call the component at import. React generates displayName of a component based on its class name (used when debugging), though. Apart from that it doesn't make much difference.

[vincenzo-antolini-os]

Mmm interesting... import Component from "./component" didn't worked. I suspected it was a reserved keyword, I'll do some test.

Thanks V

[vincenzo-antolini-os]

It works as you stated. Thanks again, I'm more confident in what I learned. V

[dvc94ch]

I'm having the same problem. How did you solve it? Thanks.

ERROR in ./src/test.es6.js
Module parse failed: /home/dvc/workspace/underbar/src/test.es6.js Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| class Point {
|   constructor(x, y) {
|     this.x = x;

webpack.config.js

/*jshint node:true*/
'use strict';

module.exports = {
  entry: './src/test.es6.js',
  output: {
    filename: './dist/bundle.js'
  },

  loaders: [{
    test: /\.es6\.js$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
      cacheDirectory: true,
      optional: ['runtime'],
      stage: 0
    }
  }]
};

./src/test.es6.js

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ',' + this.y + ')';
  }
}
export default Point;

[bebraw]

@dvc94ch Your configuration is missing a little something. Try this:

  module: {
    loaders: [{
      test: /\.es6\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        cacheDirectory: true,
        optional: ['runtime'],
        stage: 0
      }
    }]
  }

Now it should be able to pick up the loader correctly. Note that you may need to hit npm i babel-runtime babel-loader for that to work correctly. Hit npm i babel-runtime babel-loader --save-dev to include them as dev deps.

[dvc94ch]

Yep, that did it. Thank you :)

[mrfr0g]

Little late to the party, but I wanted to say thanks. This helped me as well.

[sygn]

I had the same problem. The "problem" was that i created a file within sublime which didn't had a file type suffix. I renamed the file to fileName.js and it worked.