How to configure module.alias properly

Question

I would like to use resolve.alias feature from webpack in my projects using React Starter Kit.

For example:

Instead this:

import Component from '../../components/Component

I would like to use

import Component from 'components/Component

I've added this configuration on config.js file:

resolve: {
  alias: {
    components: './src/components'
  }
}

This resolve.alias enables aliases for projects bundled with webpack but doesn't working with React Starter Kit.

score 1 · Accepted Answer · answered Jul 24 '17 at 22:01

You need to configure alias with the full path:

resolve: {
  alias: {
    components: path.resolve(__dirname, './src/components')
  }
}

Instead of using alias, I usually use modules to "mount" my entire src folder:

resolve: {
  modules: [
    path.resolve(__dirname, "./src"),
    'node_modules',
  ],

which, assuming I have a dir structure like:

src/
src/components/...
src/util/...
src/routes/...
src/views/...

let's me write these sorts of imports:

import C from 'components/C';
import foo from 'util/foo';
import routes from 'routes/blah';
...

This solved part of my problem, in fact my issue was related with [this problem](https://github.com/webpack/webpack/issues/4817). Anyway, this approach is excelent to reach my goal. Thank you. — Jan Cássio, Jul 25 '17 at 14:02

score 0 · Answer 2 · answered Jul 24 '17 at 21:07

0

How about?

import Component from 'components'

answered Jul 24 '17 at 21:07

Shawn K

I got error message: `Can't resolve 'components' in '/Users/.../Container.js'` – Jan Cássio Jul 24 '17 at 21:15
webpack alias is trying to do it's thing for sure... seems like the path might be off a bit tho. Try to set it up like this. http://xabikos.com/2015/10/03/Webpack-aliases-and-relative-paths/ – Shawn K Jul 24 '17 at 21:20

2 Answers2