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

Why don't you compile your webpack code to node (commonjs)? webpack.github.io/docs/configuration.html#output-librarytarget — jantimon
– jantimon, Commented Jun 3, 2015 at 7:05

shtuper · Accepted Answer · 2015-06-04 10:10:27Z

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

answered Jun 4, 2015 at 10:10

shtuper

3,9263 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shtuper · Accepted Answer · 2015-06-02 16:29:37Z

1

I see 2 options:

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.
Use relative paths i.e. import Header from './components/header/main'

answered Jun 2, 2015 at 16:29

shtuper

3,9263 gold badges23 silver badges29 bronze badges

6 Comments

VAShhh Over a year ago

Thanks for the reply. I've tried with relative paths but the problem is that I also import css files inside my jsx (see github.com/vshjxyz/es6-react-flux-node-quickstart/blob/master/… 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!

shtuper Over a year ago

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 github.com/vshjxyz/es6-react-flux-node-quickstart/blob/master/… . 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.

shtuper Over a year ago

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 stackoverflow.com/questions/30347722/…

VAShhh Over a year ago

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 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

shtuper Over a year ago

Seems like this makes it possible process.env.NODE_PATH = 'app';. github.com/iam4x/isomorphic-flux-boilerplate/blob/master/server/… But you still have to check if it's browser when requiring css

|

Collectives™ on Stack Overflow

Webpack-dev-server and isomorphic react-node application

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related