Isomorphic answer with solution.root Webpack option

Question

My React application requires using the root directory of my JS file using Webpack resolve.root . That is, 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 on the client side. Now I'm trying to make it isomorphic. If I need AppContainer.react.js in my server.js, it says components/App.react not found. Node is trying to require containers/components/App.react.js , which does not 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 can use https://github.com/halt-hammerzeit/universal-webpack . This will allow you to keep the same webpack configuration (e.g. resolve.root and any aliases), and also help you move on to server-side rendering. Usage documents give a pretty good example of how to do this.

Answer 2

you can try using this babel plugin: babel-plugin-module-resolver ,

then change your .babelrc as follows:

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

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

Answer 3

You tried

 import App from '../components/App.react'; 

Answer 4

Where is your server.js file? If it is in the same directory as your “containers” folder, you can do ./components/App.react .

Otherwise, you can use .. to go back as far as you need to find your files.

 Examples (relative to server.js): ./ -> current directory ../ -> up one directory ../../ -> up two directories etc.. 

Answer 5

Depending on the structure of your catalog.

 import App from '../js/containers/AppContainer.react'; 

- Is this what you want.