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).

jsconfig.json

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

craco.config.js

const path = require('path')
module.exports = {
webpack: {
alias: {
'@components': path.resolve(
__dirname,
'src/components/'
),
'@containers': path.resolve(
__dirname,
'src/containers/'
),
'@redux': path.resolve(
__dirname,
'src/redux-store/'
),
'@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...

2 comments
Comment actions Permalink

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

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

see https://github.com/microsoft/TypeScript/issues/26859 and linked tickets

1
Comment actions Permalink

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

0

Please sign in to leave a comment.