Webpack doesn't resolve properly my alias

Question

I am trying to have a namespace for my app to work as a module, and import my components using this namespace and limit the use of relative path.

Although, even though I followed the webpack documentation for alias here: http://webpack.github.io/docs/configuration.html#resolve-alias I can't make it to work.

This is how my resolve object looks like:

resolve: {
  root: path.resolve(__dirname),
  alias: {
    myApp: './src',
  },
  extensions: ['', '.js', '.json', '.jsx']
}

path.resolve(__dirname) resolves /Users/Alex/Workspace/MyAppName/ui/

I import my file that way in the file /Users/Alex/Workspace/MyAppName/ui/src/components/Header/index.jsx:

import { myMethod } from 'myApp/utils/myUtils';

I get the following error during the build:

ERROR in ./src/components/Header/index.jsx
Module not found: Error: Cannot resolve module 'myApp/utils/myUtils' in /Users/Alex/Workspace/MyAppName/ui/src/components/Header
 @ ./src/components/Header/index.jsx 33:19-56

I also tried with modulesDirectories but it doesn't work either.

Do you have any idea what is wrong?

Answer 1

Resolving the alias to the absolute path should do the trick:

resolve: {
  alias: {
    myApp: path.resolve(__dirname, 'src'),
  },
  extensions: ['', '.js', '.jsx']
}

Check this webpack resolve alias gist with a simple example.

Another solution to limit the number of relative paths is to add your ./src folder as root instead of aliasing it:

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

Then you will be able to require all folders inside ./src as if they where modules. For example, assuming you have the following directory structure:

.
├── node_modules
├── src
│   ├── components
│   └── utils

you would be able to import from components and utils like this:

import Header from 'components/Header';
import { myMethod } from 'utils/myUtils';

Something like having an alias for each folder inside ./src.

Answer 2

This might be obvious to many but if you, like me, have spent too much time trying to figure out why it suddenly does not work when moving from Windows or Mac to Linux then check casing in the paths...

Me and everyone else on the project are using Windows or Mac but at home I dual boot ubuntu which I enjoy using. On cloning our code and running webpack i got a whole lot of Cannot resolve module... errors. I spent more time than I'd like to admit searching for some obscure error in node, npm, webpack or anything until I noticed the paths of the failing modules were something like @app/Shared/settings.js and the require was require('@app/shared/settings'). Windows doesn't care so everything was fine all until I started working on linux. As it turned out problem was not with webpack, node or anything else so that's probably why I didn't find anyone suggesting that this could be the problem.

Hope this saves some time for someone. Or maybe I'm just dumb, I don't know.