Having trouble with the webpack module resolution
These're two ways to inform webpack of extra location to look for a module.
// webpack.config.js
module.exports = {
//...
resolve: {
// 1. add extra `node_modules` directory to search path
modules: ['node_modules', '/abs_path/to/global/node_modules'],
// 2. use alias to explicitly map a module name to its exact location
alias: {
'@abc': '/abs_path/to/global/node_modules/@abc'
}
}
};
For your use case, if you only has @abc
module sitting outside the conventional local node_modules
directory, I'd recommend you use resolve.alias
.
Source: https://webpack.js.org/configuration/resolve/#resolvemodules.
If you are doing an import like this:
import SomeComponent from '@abc/components';
You are telling Webpack to import a module named @abc/components
from its "resolve root". This resolve root is normally 'node_modules'. (Imagine if @abc/components
was an npm package, that'd work fine.)
As you obtained this library from a different source via your command line tool, you will have these dependencies at a different location. Webpack won't magically recognize these, but you have a few simple options:
- Make
abc-cli
copy theabc
's component files toapp
'snode_modules/@abc
. - Create a symlink in
app
'snode_modules
called@abc
that points to abc's folder. Webpack traverses symlinks by default and this spares you the time to copy the files each time. Slightly better solution IMO, especially ifabc
changes more than once in a while. - Tell webpack to also search for modules in
@abc
's folder, not justnode_modules
. You can do that usingresolve.modules
just like Ngô Hùng Phúc showed in his answer. Be a little careful though, as you are importing the modules like@abc/components
you have to point webpack to the directory one level above@abc
, and of course this requires abc's component directory to be called@abc
.