resolve.root vs moduleDirectories #472

Closed
necolas opened this Issue Sep 14, 2014 · 16 comments

Comments

Projects
None yet
10 participants
@necolas

necolas commented Sep 14, 2014

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?

@jhnns

This comment has been minimized.

Show comment
Hide comment
@jhnns

jhnns Sep 15, 2014

Member

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
Member

jhnns commented Sep 15, 2014

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
@sokra

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Sep 16, 2014

Member

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.

Member

sokra commented Sep 16, 2014

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.

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Sep 16, 2014

Ah thanks! Not sure how I missed that…long days :(

necolas commented Sep 16, 2014

Ah thanks! Not sure how I missed that…long days :(

@necolas necolas closed this Sep 16, 2014

@jhnns

This comment has been minimized.

Show comment
Hide comment
@jhnns

jhnns Sep 17, 2014

Member

@sokra Thanks for clearification.

So bower_components should rather be part of resolve.root instead of modulesDirectories?

Member

jhnns commented Sep 17, 2014

@sokra Thanks for clearification.

So bower_components should rather be part of resolve.root instead of modulesDirectories?

@sokra

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Sep 17, 2014

Member

ehm... yes

Member

sokra commented Sep 17, 2014

ehm... yes

@Targun

This comment has been minimized.

Show comment
Hide comment
@Targun

Targun Dec 23, 2015

This wasn't working for me:

resolve: {
    root: path.resolve('src'),
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js', '.jsx']
},

How should the resolve look to work with both node_modules and everything inside of the public folder?

Targun commented Dec 23, 2015

This wasn't working for me:

resolve: {
    root: path.resolve('src'),
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js', '.jsx']
},

How should the resolve look to work with both node_modules and everything inside of the public folder?

@jhnns

This comment has been minimized.

Show comment
Hide comment
@jhnns

jhnns Dec 26, 2015

Member

@Targun sorry, that's not enough information to solve your issue. You need to provide us with examples, your folder structure, your specific error.

Member

jhnns commented Dec 26, 2015

@Targun sorry, that's not enough information to solve your issue. You need to provide us with examples, your folder structure, your specific error.

@Targun

This comment has been minimized.

Show comment
Hide comment
@Targun

Targun Dec 28, 2015

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 "../../.."

Targun commented Dec 28, 2015

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 "../../.."

@jhnns

This comment has been minimized.

Show comment
Hide comment
@jhnns

jhnns Jan 1, 2016

Member

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.

Member

jhnns commented Jan 1, 2016

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.

@Targun

This comment has been minimized.

Show comment
Hide comment
@Targun

Targun Jan 2, 2016

Thanks for your help!

Targun commented Jan 2, 2016

Thanks for your help!

@pigcan

This comment has been minimized.

Show comment
Hide comment
@pigcan

pigcan Sep 22, 2016

@jhnns

resolveLoader: {
  modulesDirectories: [ path.resolve(__dirname, '../node_modules'), 'node_modules' ],
  extensions: [".loader.js", ".js"]
},

So when I write css!postcss!less how to look up postcss-loader

Thanks

pigcan commented Sep 22, 2016

@jhnns

resolveLoader: {
  modulesDirectories: [ path.resolve(__dirname, '../node_modules'), 'node_modules' ],
  extensions: [".loader.js", ".js"]
},

So when I write css!postcss!less how to look up postcss-loader

Thanks

@IAMtheIAM

This comment has been minimized.

Show comment
Hide comment
@IAMtheIAM

IAMtheIAM Sep 26, 2016

How do we do this in webpack 2.1.0-beta.25? It doesnt allow resolveLoader.modulesDirectories

IAMtheIAM commented Sep 26, 2016

How do we do this in webpack 2.1.0-beta.25? It doesnt allow resolveLoader.modulesDirectories

@flamerohr flamerohr referenced this issue in silverstripe/silverstripe-framework Oct 5, 2016

Merged

Added development watch command to package.json #6152

@alex88

This comment has been minimized.

Show comment
Hide comment
@alex88

alex88 Oct 14, 2016

@IAMtheIAM use resolve.modules

alex88 commented Oct 14, 2016

@IAMtheIAM use resolve.modules

@dragosrusu

This comment has been minimized.

Show comment
Hide comment
@dragosrusu

dragosrusu Dec 14, 2016

@alex88 : doesn't seem to work - can you provide a sample?
Tried with: "resolve: { modules: "../devtools/node_modules" } and it did not work out.

@alex88 : doesn't seem to work - can you provide a sample?
Tried with: "resolve: { modules: "../devtools/node_modules" } and it did not work out.

@evenfrost

This comment has been minimized.

Show comment
Hide comment
@evenfrost

evenfrost Dec 20, 2016

@dragosrusu
resolve.modules should be an array, so try resolve: { modules: ["../devtools/node_modules"] } instead.

@dragosrusu
resolve.modules should be an array, so try resolve: { modules: ["../devtools/node_modules"] } instead.

@shirakaba

This comment has been minimized.

Show comment
Hide comment
@shirakaba

shirakaba Jan 16, 2017

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: ["."]
}

shirakaba commented Jan 16, 2017

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: ["."]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment