Using webpack and babel with files from parent project directory

Question

I have a project set up like this and I'm trying to require file-a.js from file-b.js.

project-name/
  node_modules/
  src/
    file-a.js
  tools/
    tool-name/
      node_modules/
      src/
        file-b.js
      webpack.config.js
      package.json
  package.json

My webpack 1.13.0 configuration was working until I added babel-loader 6.2.4 with babel-preset-es2015 6.6.0. Then I started getting error messages.

ERROR in /home/dan/dev/dan/project-name/src/file-a.js Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/dan/dev/dan/project-name/src"

Now I have a hunch that this is happening because it's looking for babel-preset-es2015 in the upper package.json. I can make this error go away by installing it at that level, but then I get a similar message about the babel module not being there.

I've tried all sorts of things, symlinked the upper src directory into the inner project, used resolve.root and resolve.alias to try and manually resolve the folder without the nested path. Used context to set the project root as the outer folder, but it still picked up the wrong node_modules.

How can I force webpack to use the correct node_modules folder?

Answer 1

By default webpack looks in ./node_modules, ../node_modules, and ../../node_modules.

To force it to only use a specific directory, you can set an absolute path for the module modulesDirectories property in the resolve section:

module.exports = {
  // ...
  resolve: {
     modulesDirectories: [path.join(__dirname, 'node_modules')]
  }
}

More details on moduleDirectories in webpack's documentation