Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack doesn't resolve properly my alias

Tags:

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?

like image 752
alexmngn Avatar asked Apr 01 '16 20:04

alexmngn


People also ask

Does webpack include node_modules?

Webpack builds a dependency graph used internally Now all modules that are used in your app are included in the dependency graph. Your project have many installed dependencies in the node_modules folder that should not be included in your client-side JavaScript production bundle.

Where is webpack config file?

To answer your specific question, the webpack configuration is stored wherever your global node_modules are installed; on Windows this is typically %AppData%\Roaming\npm\node_modules\powerbi-visuals-tools\lib\webpack. config. js.

What is webpack config JS?

Webpack configs allow you to configure and extend Webpack's basic functionality. A Webpack config is a JavaScript object that configures one of Webpack's options. Most projects define their Webpack config in a top-level webpack. config. js file, although you can also pass the config as a parameter to Webpack's Node.

What is webpack alias?

Aliasing is webpack's handy way to shave time and keystrokes off importing frequently used modules. You will need the path module, included with node. js, as it is how you will tell webpack where to look for those specific files. Using the resolve. alias property, you can define aliases for frequently imported modules.


2 Answers

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.

like image 99
dreyescat Avatar answered Sep 28 '22 02:09

dreyescat


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.

like image 31
niknoe Avatar answered Sep 28 '22 01:09

niknoe