Isomorphic React with Webpack's resolve.root option

Question

My React app uses requires relative to the root of my JS file using Webpack's resolve.root. I.e. my file structure contains the following:

components
  App.react.js
containers
  AppContainer.react.js

In AppContainer.react.js, I have:

import App from 'components/App.react';

This works client-side. Now I'm trying to make it isomorphic. If I require AppContainer.react.js in my server.js, it says components/App.react isn't found. Node is trying to require containers/components/App.react.js, which doesn't exist. How can I make Node require relative to a given directory?

Edit: My directory structure looks like this:

css/
html/
js/
  components/
    App.react.js
  containers/
    AppContainer.react.js
  main.js <- requires AppContainer
public/
server/
  server.js <- requires AppContainer

Answer 1

You could use https://github.com/halt-hammerzeit/universal-webpack. This will let you keep your same webpack config (eg. resolve.root and any aliases) and additionally help get you moving towards server side rendering. The usage docs give a pretty good example of how to get this up and running.

Answer 2

you can try to use this babel-plugin: babel-plugin-module-resolver,

then change your .babelrc as follow:

{
  "plugins": [
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "components": "./components"
      }
    }]
  ]
}

then you can require your component in your server.js import App from 'components/App.react';