Webpack's alias doesn't work when target module is in node_modules

Question

Background

I'm writing an SSR react app with typescript, there's a client-side module I have to use (client-logger) and it can only be run on client-side since it's AMD module system. running on Node will give errors.

My current solution is to replace the client-logger module with a rewrite-client-logger module at compile time ONLY for server bundle.

I have tried Webpack's NormalModuleReplacementPlugin and alias, even write my own loader, none of them works, this is my Webpack config for the alias.

This is the demo link for repro: https://github.com/stanleyyylau/demo

Repro Steps:

• Git clone and checkout to Master branch
• npm install to install all dependencies
• copy client-logger to node_modules with cp -rf ./client-logger ./node_modules
• npm run build to trigger the build
• npm run start to run the universal app

Expected result:

• Server should be running with no error
• Server bundle's client-logger should be replaced by rewrite-client-logger ( You can verify this by searching for the string register event in assets/server.js file.)

Actual result:

• Node gives runtime error ReferenceError: define is not defined

• client-logger is not being replaced by rewrite-client-logger (alias replacement only works when client-logger is not in node_modules folder.)

  if anyone has other ways to replace module at compile time, please let me know, highly appreciate.

Answer 1

You can fix the issue by changing your webpack-node-externals configuration to include the logger. That way the alias rule has a chance to work. Try

externals: [nodeExternals({
    whitelist: ['client-logger']
})]