Webpack-dev-server application and node isomorphic response

Question

I managed to use the webpack dev server correctly with the node (express) server using the plugin section in the webpack configuration.

Everything works fine, but now I'm trying to use client components isomorphically inside an express application.

So far, the only problem that I am facing is that without having webpack “sorted out” my server code, I was in a situation where I needed components, but the paths were not resolved.

those.

Inside 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 

Do I have to configure webpack differently or do I need all import data to be valid on the server side?

the code base is here if you want to see the actual state https://github.com/vshjxyz/es6-react-flux-node-quickstart

Answer 1

I see 2 options:

• Compile the client code with webpack. If the client entry point is in the same directory as the server, it should work with your real code. It looks natural to me.
• Use relative paths i.e. import Header from './components/header/main'

Answer 2

To be able to require components in the same way as require('components/Header.js'); and avoid using long relative paths such as require('../../../../../../Header.js'); , you can add this code to your node application before any require () calls:

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

However, since it depends on the private method of Node.js, it is also a hack that may stop working on a previous or next version of Node.

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