CODEWITHSUNDEEP
javascriptreactjswebpackpath
complexSandwich
complexSandwich

Reputation: 595

Absolute import using Webpack resolve.alias in a React app

I'm working on a React app that's NOT built with create-react-app and trying to work with Webpack to make absolute imports work. The app structure looks like this:

.
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   ├── actions
│   ├── components
│   │   └── App.js
│   ├── index.css
│   ├── index.js
│   ├── reducers
│   │   └── index.js
│   ├── storage
│   │   └── index.js
│   └── store.js
└── webpack.config.js

The reason I have the store.js file and also the storage directory is because the absolute import is not working (that's why I'm making it work by relative importing from store.js). The following is what I'm doing in my webpack.config.js for the absolute import, as per their docs and other SO threads:

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

However, I keep getting the following error despite adding the rule: 

ERROR in ./src/storage/index.js
Module not found: Error: Can't resolve './reducers' in '/my-project/src/storage'

I'm simply doing an import rootReducer from './reducers'; from the storage/index.js file, where the error is coming from. What would be a good way to configure the webpack.alias object correctly in this case?

Upvotes: 1

Views: 3325

Answers (2)

Dandgerson
Dandgerson

Reputation: 89

You can wrap your code into node_modules in src directory and you can import from src as from root

.
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   └── node_modules
│       ├── actions
│       ├── components
│       │   └── App.js
│       ├── index.css
│       ├── index.js
│       ├── reducers
│       │   └── index.js
│       ├── storage
│       │   └── index.js
│       └── store.js
└── webpack.config.js

import App from 'components/App'

Upvotes: -1

complexSandwich
complexSandwich

Reputation: 595

as Prakash pointed out above, here's what I needed to do:

resolve: {
        alias: {
            components: path.resolve(__dirname, 'src/components'),
            reducers: path.resolve(__dirname, 'src/reducers')
        },
        extensions: ['.js']
    },

Upvotes: 2

Related Questions