Hi I'm having problems with the tsconfig paths
The folder structure looks like this:
.
├── src
│ ├── components
│ │ └── someComponent.ts
│ ├── models
│ │ └── tree.ts
│ ├── slices
│ | └── activeItem.ts
| └── more_stuff...
└── tsconfig.json
And the tsconfig.json file is configured like this
{
"compilerOptions": {
"jsx": "react",
"allowJs": true,
"module": "commonjs",
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": true,
"sourceMap": true,
"baseUrl": "./src",
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true,
"paths": {
"@slices/*": ["slices/*"],
"@models/*": ["models/*"],
"@typedefs/*": ["types/*"]
}
},
"include": [
"src/**/*",
]
}
And then when I try to use @slices in src/components/some-component.ts like this:
import { TreeNode } from '@models/tree'
import { selectItems } from '@slices/activeItem'
VS code recognices the folder and show its contents in the linter, but when I run the application I got the error
Module not found: Error: Can't resolve '@slices/activeItem' in
'/workspace/electron/keysafe/src/components/tree/tree-item'
Field 'browser' doesn't contain a valid alias configuration
/workspace/electron/keysafe/node_modules/@slices/activeItem.ts doesn't exist
- Notice that in the error it's trying to look for the folder inside
node_modules - It only fails with the
slicesfolder, if I remove the import the others work without any issues. - I've already tried renaming the folder and the alias to
cs,customSlicesbut the problem persists only with that folder. - I had the same issue with
@typesbut changing the alias to@typedefssolved it (I guess it's reserved by TS)