Webpack Aliases in Node JS Server code

Question

I'm building an isomorphic React/React-Router/Redux/Webpack application and I'm attempting to implement server side rendering.

My directory looks like:

/client
    /actions
    /components
    /containers
/server
    /server.js

In my webpack config, I have aliases set up for all the folders inside client:

var path_base = path.resolve(__dirname, '..');
const resolve = path.resolve;
const base = function() {
  var args = [path_base];
  args.push.apply(args, arguments);
  return resolve.apply(resolve,args);
};
const resolve_alias = base.bind(null, 'src/client');
const aliases = [
  'actions',
  'components',
  'constants',
  'containers',
  'middleware',
  'reducers',
  'routes',
  'store',
  'styles',
  'utils',
  'validation'
];

so that inside the code that gets bundled by webpack, I can do:

import { Widget } from 'components';

and that import gets resolved by webpack.

Now in my server code, in order to do the rendering, I have to import some of my client files, like routes/index.js. The problem I'm running into when I import my routes file, it's using a webpack alias to another file, say components or containers so naturally, the node js require system can't resolve it.

How do I fix something like that? I looked at this question and it talks about essentially setting up the same aliases that exist in webpack with mock-require. But then the issue becomes that my routes file imports all my components which then all import things like stylesheets, images, etc. Should I then be using something like webpack-isomorphic-tools?

The guides I've been looking at (this for example) are all great at showing how server side rendering is accomplished but none of them really talk about how to resolve all the requires and whatnot.

It sounds like there are several questions here: (a) how do I use the aliases when running server-side, and (b) how do I handle included resources like stylesheets on the server. One solution is to run your server code through webpack too. You can use target: node in your config and it will optimize it for node during the build (i.e. it won't bundle node includes). I do this sometimes for code that uses Babel. Short of doing a build, definitely don't use aliases. Any solution will be hacky at best. — Josh David Miller
– Josh David Miller, Commented Jan 8, 2016 at 23:22
Aliases are fine when you're doing a build with webpack. Your problem is because you are using aliases in a webpack build and trying to get the same code to work outside a webpack build. My point was that to use the aliases, you need to build your server code too (which will make the aliases work just fine). Without the build, the only way to get aliases to work is to hack it together, which is where your problem is. Hacks are bad, so use the aliases and build your server code too, or just abandon the aliases. — Josh David Miller
– Josh David Miller, Commented Jan 9, 2016 at 1:20
Then using something like webpack-isomorphic-tools shouldn't be a problem then because that supports aliases, for both server and client code. — barndog
– barndog, Commented Jan 9, 2016 at 1:46
gist.github.com/startupthekid/3223a866616b6dc59e4d5d4fc03275a7. I included my aliases file, all the configs, and then my scripts from my package.json. There's a ton of files, four for the server and client each (base config, dev config, production config, production entry file, and development entry file) and then a base configuration file as well as the universal webpack config file. I don't have all of them in the gist (I haven't set up production configs yet) but that should be a good start for you — barndog
– barndog, Commented Oct 6, 2016 at 3:51

Community · Accepted Answer · 2017-05-23 12:01:48Z

6

After battling with this issue for 2 days I settled on babel-plugin-webpack-alias. What you need to do to resolve paths with that is:

$ npm install --save-dev babel-plugin-webpack-alias
Add the plugin to your .babelrc
Add the aliases to your webpack.config (make sure you use path.join())
Refer to this post if you have problems loading styles

The other option I tried was universal-webpack but I found it to be a bit verbose. If you want to see roughly how the whole server-side loading works, you can check out this video.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Oct 7, 2016 at 2:54

Vlady Veselinov

5,5015 gold badges29 silver badges50 bronze badges

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

1 Comment

FeifanZ Over a year ago

babel-plugin-webpack-alias works, but seems like it breaks Jest. Isolating this plugin to Babel's development environment (via the env config key) fixed that for me

zackify · Accepted Answer · 2016-02-15 16:55:52Z

1

If you really want them, run your server side code through babel and use this plugin: https://www.npmjs.com/package/babel-plugin-module-alias which will let you do the same thing as webpack.

Edit: This one works a lot better: https://github.com/jagrem/babel-resolve-relative-module it allows multiple paths

edited Feb 15, 2016 at 16:55

answered Jan 8, 2016 at 22:45

zackify

5,4542 gold badges24 silver badges28 bronze badges

3 Comments

barndog Over a year ago

What's the reasoning behind not using them?

zackify Over a year ago

It just seems to cause problems plus you have to rely on using at the very least a plugin on the server, and probably running your whole code base through Babel. Which I guess is fine but if the only reason you pull in Babel is for aliases, seems like a lot of work

Kevin Over a year ago

THANK YOU for linking to that Babel plugin! I hadn't thought to look on the Babel side of things for aliasing. This helped me a lot!

just-boris · Accepted Answer · 2016-01-10 11:50:09Z

0

Try to use NODE_PATH. Node will always look for a module in this path during require calls. It allows to short cut your relative paths as you want.

// turn this
import {Widget} from '../../components';

// into this
import {Widget} from 'components';

See Node.js docs for more information.

P.S. this thing is very sensitive, so use it carefully. Now your code tightly depends from the environment and may break somewhere.

answered Jan 10, 2016 at 11:50

just-boris

9,7865 gold badges51 silver badges87 bronze badges

Comments

Andrew Rasmussen · Accepted Answer · 2016-12-13 19:36:06Z

0

If you use webpack-isomorphic-tools then it'll take your webpack config into account for your server side which will make all your aliases work.

https://www.npmjs.com/package/webpack-isomorphic-tools

answered Dec 13, 2016 at 19:36

Andrew Rasmussen

15.2k10 gold badges47 silver badges84 bronze badges

Collectives™ on Stack Overflow

Webpack Aliases in Node JS Server code

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related