Problem with importing aliases

I've set up my project using CRACO for Create React App. and had include "alias" info in 2 files: craco.config.js && jsocnfig.json (see code below).


"compilerOptions": {
"target": "esnext",
"baseUrl": "./src",
"jsx": "react",
"paths": {
"@components/*": ["./components/*"],
"@containers/*": ["./containers/*"],
"@redux/*": ["./redux-store/*"],
"@data/*": ["./data/*"]
"exclude": ["node_modules", "**/node_modules/*", "build"]


const path = require('path')
module.exports = {
webpack: {
alias: {
'@components': path.resolve(
'@containers': path.resolve(
'@redux': path.resolve(
'@data': path.resolve(__dirname, 'src/data/'),

So import working right now, but there is that ugly highlight that says "Module is not installed" when I'm importing from "/index" without mentioning it in the path. If I point out "/index" the highlight is gone...

Can you suggest how to solve that highlighting issue? Seems like I set up everything correctly since it working even with highlighting...

Comment actions Permalink

adding one more mapping to jsconfig.json to map a file to alias should work, like:

"@redux": ["./redux-store"]

see and linked tickets

Comment actions Permalink

Elena Pogorelova thanks, seems like adding additional aliases without " /* " helps IDE to handle the "/index" imports as well :D


Please sign in to leave a comment.