3

I am trying to create routes for my React application with react-router-component. But when I build my project with webpack, I get the error:

ERROR in ./app/js/client.jsx Module build failed: Error: Parse Error: Line 22: Unexpected token <

The routes are in my client.jsx file, which looks like this: 

'use strict';

var React = require('react');
var Router = require('react-router-component');
var Locations = Router.Locations;
var Location = Router.Location;
var {MainPage} = require('./components/views/app.jsx');

var App = React.createClass({
  render: function() {
    return (
      <Locations>
        <Location path="/" handler={MainPage} />
      </Locations>
    )
  }
})

React.render(React.createElement(App), document.body)

I'm not sure what I'm doing wrong here. Any help would be appreciated. Let me know if you need more info. Thanks!

Edit: my webpack configuration looks like this: 

webpack: {
  client: {
    entry: __dirname + '/app/js/client.jsx',
    output: {
      path: 'build/',
      file: 'bundle.js'
    },
    module: {
      loaders: [
      {
        test: /\.jsx$/,
        loader:'jsx-loader'
      }]
    }
  },
  test: {
    entry: __dirname + '/test/client/test.js',
    output: {
      path: 'test/client/',
      file: 'bundle.js'
    },
    module: {
      loaders: [
      {
        test: /\.jsx$/,
        loader:'jsx-loader'
      }]
    }
  },
  karma_test: {
    entry: __dirname + '/test/karma_tests/test_entry.js',
    output: {
      path: 'test/karma_tests/',
      file: 'bundle.js'
    },
    module: {
      loaders: [
      {
        test: /\.jsx$/,
        loader:'jsx-loader'
      }]
    },
    background: true
  }
},

You can see the full project so far here: https://github.com/mrbgit/short-stories/tree/add-category-age

Jordan Running
  • 91,621
  • 15
  • 164
  • 165
CascadiaJS
  • 1,766
  • 2
  • 21
  • 38
  • Presumably your JSX isn't being compiled. What Webpack loader are you using to compile it? Can you edit your question to include your Webpack configuration? – Jordan Running Jul 28 '15 at 19:37
  • Thanks Jordan, I added the webpack configuration and a link to the branch of my github repo with the full project so far. – CascadiaJS Jul 28 '15 at 20:04
  • I think I might have been mistaken. Have other JSX files been working? The error message is odd, since `client.jsx` doesn't appear to have 22 lines, so it seems like this is happening after the file is compiled (since the compiled output probably has 22+ lines). – Jordan Running Jul 28 '15 at 20:13

1 Answers1

1

Don't use destructuring for the MainPage variable since that file is only exporting the React class. It should look like this

var MainPage = require('./components/views/app.jsx');
Ed Ballot
  • 3,206
  • 1
  • 14
  • 24