Posted in Uncategorized

resolve.root vs moduleDirectories

   February 23, 2021  7 Comments on resolve.root vs moduleDirectories

What’s the practical difference between these options? If I have a project structure like this:

|-- webpack.config.js
|-- src
    |-- node_modules
    |-- web_modules

I was expecting to be able to set a root to /absolute-path/etc/src and have webpack use that as the base to search for web_modules and node_modules. But instead I had to do either:

resolve.root = [ 'src/node_modules', 'src/web_moodules' ]

or

resolve.moduleDirectories = [ 'src/node_modules', 'src/web_moodules' ]

What’s the benefit of root? Is it possible to set some kind of base path in the way I was looking for?

Author: Fantashit

7 thoughts on “resolve.root vs moduleDirectories”

  1. resolve.root is usually the root of your project. All paths in the sourcemap for example will be relative to this root. modulesDirectories describes the names of directories for modules which are resolved via node’s resolving algorithm. So modulesDirectories shouldn’t contain whole paths, but only dir names.

    For example if you specifiy ["node_modules", "bower_components"] and require a module a in foo/bar webpack will look them up in this order

    • foo/bar/node_modules/a
    • foo/bar/bower_components/a
    • foo/node_modules/a
    • foo/bower_components/a
    • node_modules/a
    • bower_components/a

  2. resolve.root is usually the root of your project. All paths in the sourcemap for example will be relative to this root.

    You described the context option.

    resolve.root is an absolute path to a directory containing modules.
    resolve.moduleDirectories is an relative path to a tree of directories containing modules.

    Use resolve.moduleDirectories only for package managers with a depth dependency structure.
    In every other case use resolve.root.

  3. Sorry for the lack of details. This is what ended up working for me:

    resolve: {
    modulesDirectories: ['node_modules', './src'],
    extensions: ['', '.js', '.jsx']
},

    Now I am able to import files from the root of my src folder rather then needing “../../..”

  4. Mhmmm this config could have an impact on your bundling performance. It causes webpack to prepend ./src to every folder. So when you write require("a") it will try to look up:

    /some/folder/structure/node_modules/a
/some/folder/structure/src/a
/some/folder/node_modules/a
/some/folder/src/a
/some/node_modules/a
/some/src/a
/node_modules/a
/src/a

    resolve.root should work as expected. I think there is another problem in your config.

  7. Using webpack 2.1.0-beta.22, I found that webpack appeared to be ignoring my settings in resolve.modulesDirectories and, as far as I could understand, also resolve.root.

    As @alex88 suggested, adding a resolve.modules configuration instead of resolve.modulesDirectories and resolve.root allowed me to use paths relative to a root rather than relative to the module (exactly as this StackOverflow poster desired):

    resolve: {
   modules: ["."]
}

Comments are closed.