CODEWITHSUNDEEP
javascriptnode.jswebpack
daleee
daleee

Reputation: 101

webpack 1: resolve.alias not aliasing one npm module to another

I have a webpack config used to create a server bundle for an isomorphic React app. Inside of that config, I’m trying to use resolve.alias to alias one module (parse) as another (parse/node). This handy chart about resolve.alias in webpack's documentation makes it seem like this should be possible. This is what my alias object looks like:

alias: {
    parse: 'parse/node',
    pubnub: 'static/deps/pubnub/pubnub-3.13.0.min.js'
}

I’m already using alias for the module pubnub, and that alias works at intended. Unfortunately, whatever I do to the parse key doesn’t seem to change the resulting require in my webpack-built bundle.js:

/***/ function(module, exports) {
    module.exports = require("parse");
/***/ },

I’m trying to resolve to /node_modules/parse/node.js. Using absolute/relative paths doesn’t seem to work, nor added a .js extension to the end. At this point, I can’t figure out if this is a webpack bug or something I’m overlooking. Any help would be greatly appreciated! Here’s a link to a gist with my full webpack config: https://gist.github.com/daleee/a0025f55885207c1a00a

[email protected]
[email protected]
[email protected]

Upvotes: 2

Views: 897

Answers (1)

daleee
daleee

Reputation: 101

The issue was with the following line in the webpack configuration:

...,
externals: [nodeExternals({
    whitelist: ['webpack/hot/poll?1000']
})],
...,

webpack-node-externals is a webpack plugin that is used to automatically blacklist modules found in node_modules. There is usually no need to bundle npm modules in with your final bundle when building for the backend, as the npm modules are installed on the system. This blacklist also prevented webpack from doing any aliasing to any npm modules. Changing the whitelist array like so solved my issue:

...,
externals: [nodeExternals({
    whitelist: ['webpack/hot/poll?1000', 'parse']
})],
...,

The moral of this story: don't copy code from boilerplates without fully understanding what it does. I could have saved a few days of headache if I had simply just read the README.md for the webpack plugins I was using.

Upvotes: 2

Related Questions