tsconfig paths not working for some folders

Viewed 424

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 slices folder, if I remove the import the others work without any issues.
  • I've already tried renaming the folder and the alias to cs, customSlices but the problem persists only with that folder.
  • I had the same issue with @types but changing the alias to @typedefs solved it (I guess it's reserved by TS)
0 Answers
Related