CODEWITHSUNDEEP
javascriptreactjswebpack
captainill
captainill

Reputation: 2079

Webpack bundle validates but node server throwing syntax error

I am using webpack to bundle/transform jsx.

From the command line I'm running "webpack --watch". This creates my bundle without errors. Here's my webpack config and Application.js

'use strict';
var webpack = require('webpack');

module.exports = {
    resolve: {
        extensions: ['', '.js']
    },
    devtool: 'eval',
    entry: './client.js',
    output: {
        path: __dirname+'/build/js',
        filename: 'client.js'
    },    
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style!css' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' }
        ]
    }
};

var React = require('react'),
    classSet = require('react/addons'),
    Nav = require('./Nav.js'),
    Home = require('./Home.js'),
    Recipe = require('./Recipe.js'),
    RecipeArchive = require('./RecipeArchive.js'),
    About = require('./About.js'),
    Timestamp = require('./Timestamp.js'),
    RouterMixin = require('flux-router-component').RouterMixin;

var Application = React.createClass({
    mixins: [RouterMixin],
    getInitialState: function () {
        this.store = this.props.context.getStore('ApplicationStore');
        return this.store.getState();
    },
    componentDidMount: function () {
        var self = this;
        self._changeEventListener = function () {
            var state = self.store.getState();
            self.setState(state);
        };
        self.store.on('change', self._changeEventListener);
    },
    componentWillUnmount: function () {
        var self = this;
        self.store.removeListener('change', self._changeEventListener);
        self._changeEventListener = null;
    },
    render: function () {

        return (
            <div>test</div>
        );
    }
});

module.exports = Application;

Then I'm running my node server which throws an error.

node server.js

results in:

/Users//Documents/routing/components/Application.js:39
        <div>test</div>
        ^
SyntaxError: Unexpected token <

How should I be running my project to allow me to include jsx/harmony in my .js files?

UPDATE: Solution

As Brandon pointed out, I needed to use node-jsx for transforms in Node. At the top I've of my server.js file I've added and alls working:

require('node-jsx').install({ extension: '.js', harmony: true });

Upvotes: 1

Views: 1806

Answers (1)

Michelle Tilley
Michelle Tilley

Reputation: 159105

Webpack just creates a client-side bundle; when you run your Node app, it doesn't use webpack to load the files. Prevously you could use something like node-jsx to require JSX files in Node.js, but that project has since been deprecated in favor of Babel. In particular, you can use babel-register to require JSX files in Node.

Upvotes: 2

Related Questions