CODEWITHSUNDEEP
reactjswebpack
Cyril F
Cyril F

Reputation: 1339

webpack Resolve conflict? Should I use alias?

I'm trying to configure webpack to use clean import in my react app:

import { userConstants } from 'constants';

instead of:

import { userConstants } from '../../constants';

In webpack.config.js I defined:

resolve: {
  modules: [
    "node_modules",
    helpers.root('client/app')
  ],
  extensions: ['*', '.js', '.jsx']
},

This worked very well until I added a folder called constants. I wonder if some kind of conflict might appear with my node_modules since I get an error that disappears when I change the folder name to _constants:

WARNING in ./client/app/actions/user.actions.js 83:12-25 "export 'userConstants' was not found in 'constants'

My question: Should I define an alias in the webpack config for each of my folders? components, containers, constants, reducers, actions, services?

Upvotes: 1

Views: 852

Answers (1)

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8122

yes you have to use alias for each of your folder like this:

alias: {
    constants: path.resolve(APP_DIR, 'constants'),
    api: path.resolve(APP_DIR, 'api'),
    components: path.resolve(APP_DIR, 'components'),
    reducers: path.resolve(APP_DIR, 'reducers'),
  }

This would be helpful in resolving and importing modules. And make sure you have correct APP_DIR

Upvotes: 3

Related Questions