Theo's Typesafe Cult•2y ago

Issue adding import path to tsconfig.js

I wanted to create a path I can import my ui components from to make imports cleaner. Wanted to call the path "@ui" for ".src/components/ui/" but running into compiler issues. My tsconfig.json looks like

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "baseUrl": "src",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "paths": {
      "@ui/*": ["./components/ui/*"]
    }
  },
  "include": ["src"]
}

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "baseUrl": "src",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "paths": {
      "@ui/*": ["./components/ui/*"]
    }
  },
  "include": ["src"]
}

Not sure why my tsconfig.json is this long but it is what it is. This is how I'm importing my ui components in other files -

import { PageHeading } from "@ui/Headings/PageHeading";

import { PageHeading } from "@ui/Headings/PageHeading";

The error I'm getting is

ERROR in ./src/pages/Services/SharedSpace/Spaces.tsx 4:0-55
Module not found: Error: Can't resolve '@ui/Headings/PageHeading'

ERROR in ./src/pages/Services/SharedSpace/Spaces.tsx 4:0-55
Module not found: Error: Can't resolve '@ui/Headings/PageHeading'

Been trying to figure out this error for a while and have already - Restarted TS Server Restarted VS Code Don't know what else to do.

5 Replies

Unknown User•2y ago

Message Not Public

jairrardOP•2y ago

That didn't help. Also, I am getting no VS code compiler issues. Just errors in the build

Unknown User•2y ago

Message Not Public

jairrardOP•2y ago

Yes it does That’s why I’m really confused

Unknown User•2y ago

Message Not Public

Gaming

Programming

Issue adding import path to tsconfig.js