Webpack - resolve.moduleDirectories

Question

I'm having issues with Webpack resolve.moduleDirectories config. The Documentation is really straight forward, but I cant get it working.

Given the following structure

app
├── config
│   └── routes.js
├── screens
│   └── App
│       └── screens
│           └── Admin
│               └── screens
│                   └── Reports
│                       └── index.js
├── shared
│   └── buttons
│      └── SignUp.js

I would like to use the component shared/buttons/SignUp.js on several parts of my app, so I suppose that I should use the following Webpack settings:

{
  modulesDirectories: ['shared', 'node_modules']
}

From Reports/index.js, I still cant include the button, even trying all the following includes:

import SubmitButton from 'buttons/SignUp.js';
import SubmitButton from 'buttons/SignUp';
import SubmitButton from 'shared/buttons/SignUp';
...

Is there anything I'm missing or doing wrong? I've placed an example here: https://github.com/henriquebf/resolve-webpack

Answer 1

If you want to use imports like that, you can set up resolve.alias.

Example:

resolve: {
    alias: {
        shared: path.resolve(__dirname, 'app', 'shared')
    }
}

After this change import SubmitButton from 'shared/buttons/SignUp'; should work. You can tweak aliases to your liking.