Search code examples
javascriptnode.jsreactjsisomorphic-javascript

Isomorphic React with Webpack's resolve.root option

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
Solution

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