Webpack-dev-server and isomorphic react-node application

Question

I've managed to properly use webpack dev server alongside with a node server (express), using the plugin section inside webpack's config.

It all works fine but now I'm trying to go isomorphic and use client-side components inside the express application.

So far the only problem I'm encountering is that without webpack 'parsing' my server-side code I get to a situation where I require components but the paths are not solved

I.E.

Inside a component

'use strict';

import React from 'react';
import { RouteHandler, Link } from 'react-router';
import Header from 'components/header/main'; // <-- This line causes the error because webpack is not working when parsing this JSX server-side

export default React.createClass({
    displayName: 'App',
    render() {
        return ( // ... More code

Shall I configure webpack in another way or do I have to change all the imports to be valid server-side?

the codebase is here in case you want to see the actual state https://github.com/vshjxyz/es6-react-flux-node-quickstart

Answer 1

I see 2 options:

1. Compile client code with webpack as well. If client's entry point is in the same dir as server's - it should work with your present code. This looks natural to me.
2. Use relative paths i.e. import Header from './components/header/main'