2

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

VAShhh
  • 3,494
  • 2
  • 24
  • 37
  • Why don't you compile your webpack code to node (commonjs)? http://webpack.github.io/docs/configuration.html#output-librarytarget – jantimon Jun 03 '15 at 07:05

2 Answers2

3

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

Viacheslav
  • 3,876
  • 2
  • 21
  • 28
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'
Viacheslav
  • 3,876
  • 2
  • 21
  • 28
  • Thanks for the reply. I've tried with relative paths but the problem is that I also import css files inside my jsx (see https://github.com/vshjxyz/es6-react-flux-node-quickstart/blob/master/app/components/header/main.jsx for instance)... and I haven't really understood your first point - client-side is already using webpack, problem is that the node server is not! – VAShhh Jun 02 '15 at 16:33
  • How do you compile your node app with webpack? I can't see this in your repo. You're able to `import ... 'components/...'` because of this line in conifg https://github.com/vshjxyz/es6-react-flux-node-quickstart/blob/master/webpack/dev.config.js#L72 . You must have the same line in your server-side compiling config (which I can't see). Then it should work. I believe it's your best option keeping in mind that you also import css. – Viacheslav Jun 02 '15 at 16:51
  • If you don't want to compile node with webpack another option is to move to relative paths and check if it's browser before requiring CSS http://stackoverflow.com/questions/30347722/importing-css-files-in-isomorphic-react-components/30355080#30355080 – Viacheslav Jun 02 '15 at 16:57
  • Yes I know they problem stands on using modulesDirectories with webpack and not in node, I tought it was a webpack-specific option? Thanks for clarifying the css imports only if browser, now I know why I saw some projects with that. I'm trying to figure out why projects like https://github.com/iam4x/isomorphic-flux-boilerplate are not using relative paths (but sort of what I've configured) and yet they can render server-side – VAShhh Jun 02 '15 at 17:31
  • Seems like this makes it possible `process.env.NODE_PATH = 'app';`. https://github.com/iam4x/isomorphic-flux-boilerplate/blob/master/server/index.js#L9 But you still have to check if it's browser when requiring css – Viacheslav Jun 04 '15 at 09:39
  • Here's the description of this method https://gist.github.com/branneman/8048520#6-the-hack – Viacheslav Jun 04 '15 at 09:47