Webpack-dev-server and isomorphic react-node appli

问题:

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

回答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'

回答2:

In order to be able to require components in a way such as require('components/Header.js'); and avoid using long relative paths such as require('../../../../../../Header.js'); you can add this code to your node app before any require() calls:

process.env.NODE_PATH = __dirname;
require('module').Module._initPaths();

However, since this relies on a private Node.js core method, this is also a hack that might stop working on the previous or next version of node.

Other possible solutions to this problem can be found at https://gist.github.com/branneman/8048520