I have a huge project for the more than 4000 modules and of course, we using webpack aliases:
appAliases: {
components: resolveApp('src/components'),
features: resolveApp('src/features'),
core: resolveApp('src/core'),
api: resolveApp('src/api'),
store: resolveApp('src/app-store/store'),
images: resolveApp('src/images'),
constants: resolveApp('src/constants'),
fonts: resolveApp('src/fonts'),
extensions: resolveApp('src/extensions'),
localization: resolveApp('src/localization'),
'app-router': resolveApp('src/app-router'),
'app-store': resolveApp('src/app-store'),
'unit-test-mocks': resolveApp('src/unit-test-mocks'),
},
each folder at the root has file index.js
with content
export * from './my-awesome-component
export * from './my-second-awesome-component
Furthermore, each nested component also includes index.js
which probably exports main-component file
nested index.js to component level
export * from './my-awesome-component'
and so on, at the core of root there main exports.
And vsCode stucking while handling such exports and go-to-definition break
I cannot navigate to deeply nested components I've been tried several vscode configs the latest one is
{
"compilerOptions": {
"target": "ES6",
"jsx": "react",
"checkJs": true,
"module": "es6",
"allowSyntheticDefaultImports": false,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"components/*": ["src/components/*"],
"features/*": ["src/features/*"],
"core/*": ["src/core/*"],
"api/*": ["src/api/*"],
"store/*": ["src/app-store/store/*"],
"images/*": ["src/images/*"],
"constants/*": ["src/constants/*"],
"fonts/*": ["src/fonts/*"],
"extensions/*": ["src/extensions/*"],
"localization/*": ["src/localization/*"],
"app-router/*": ["src/app-router/*"],
"app-store/*": ["src/app-store/*"]
}
},
"exclude": ["node_modules", "**/node_modules/*"]
}