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.

Corby

Answer 1

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';
...

Stertorous

This solved part of my problem, in fact my issue was related with this problem. Anyway, this approach is excelent to reach my goal. Thank you. – Blaisdell

Answer 2

How about?

import Component from 'components'

Lineup

I got error message: Can't resolve 'components' in '/Users/.../Container.js' – Blaisdell

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. xabikos.com/2015/10/03/Webpack-aliases-and-relative-paths – Lineup