tsconfig paths alias

Hello, I added paths in tsconfig.json on the app like this

"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"],
  "@ui/*": ["./src/client/components/ui/*"],
}

"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"],
  "@ui/*": ["./src/client/components/ui/*"],
}

and in vite.config.ts

resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@ui': path.resolve(__dirname, './src/client/components/ui'),
    },
  }

resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@ui': path.resolve(__dirname, './src/client/components/ui'),
    },
  }

and I use the alias like this

import { cn } from '@/shared/utils';
import { Badge } from '@ui/badge';
...

import { cn } from '@/shared/utils';
import { Badge } from '@ui/badge';
...

this is not generate same thing in .wasp/out so for that i did manually edit in the .wasp/out/sdk/wasp/tsconfig.json and it's works in development But the problem is that the project will not be built the build shows errors like this

[  Wasp  ] ext-src/admin/dashboards/analytics/TotalPageViewsCard.tsx(1,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.
[  Wasp  ] ext-src/admin/dashboards/analytics/TotalPayingUsersCard.tsx(2,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.
[  Wasp  ] ext-src/admin/dashboards/analytics/TotalSignupsCard.tsx(2,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.
[  Wasp  ] ext-src/admin/dashboards/users/DropdownEditDelete.tsx(2,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.
[  Wasp  ] ext-src/admin/dashboards/users/SwitcherOne.tsx(3,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.

[  Wasp  ] ext-src/admin/dashboards/analytics/TotalPageViewsCard.tsx(1,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.
[  Wasp  ] ext-src/admin/dashboards/analytics/TotalPayingUsersCard.tsx(2,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.
[  Wasp  ] ext-src/admin/dashboards/analytics/TotalSignupsCard.tsx(2,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.
[  Wasp  ] ext-src/admin/dashboards/users/DropdownEditDelete.tsx(2,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.
[  Wasp  ] ext-src/admin/dashboards/users/SwitcherOne.tsx(3,20): error TS2307: Cannot find module '@/shared/utils' or its corresponding type declarations.

` the because the build generates different tsconfig.json how i can fix that ?

14 Replies

kapa.ai•3mo ago

Hi @nezamy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

MEE6•3mo ago

Wohooo @nezamy, you just became a Waspeteer level 1!

kapa.ai•3mo ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. However, based on the knowledge sources, it seems that Wasp has had some issues with tsconfig.json files in the past, particularly with ensuring consistency between different tsconfig.json files and providing proper IDE support (source (https://github.com/wasp-lang/wasp/issues/1057), source (https://github.com/wasp-lang/wasp/issues/710)). There is also an open issue about ensuring "user" tsconfig.json files exist and are correct, which might be related to your problem (source (https://github.com/wasp-lang/wasp/issues/939)). One of the comments in the issue suggests that Wasp should manage tsconfig.json files, checking if they are there, generating them if they are not, and fixing them if something is wrong. This could potentially include handling path aliases, but it's not explicitly stated. I recommend checking out these issues and perhaps commenting on the open issue with your specific problem. The Wasp team seems to be actively working on improving tsconfig.json support, so they might be able to help you out. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @nezamy, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Filip•3mo ago

Hi @nezamy, Yes, you got it right. It's because the project build doesn't use the tsconfig file your IDE uses. This is a big limitation and we're looking to fix it in the next version. For now, your options are: - Not using aliases (recommended) - Editing the tsconfig in .wasp/out/sdk/wasp (hacky since this file is always auto-generated) - Doing some postprocessing of your own to turn those aliases into proper paths (again, kind of hacky) Sorry for the troubles here

nezamy•3mo ago

Is there possible way to use alias like that uses in wasp file @src but in client or server files?

Filip•3mo ago

Not natively. But it is in the works: https://github.com/wasp-lang/wasp/issues/1827 I deleted your message from the general channel because we're discussing it here, hope you don't mind. For now, your options are what I listed above: editing the generated configs or doing some postprocessing of your own to make it happen.

nezamy•3mo ago

Thanks @sodic for replaying I edited the generated config in dev mod but I cannot edit them when build for production May I suggest to add default alias like @src or @ to the next update . that will be great

Filip•3mo ago

May I suggest to add default alias like @src or @ to the next update . that will be great

The next update will probably allow you to specify any alias you want, so there won't be any problems there (I hope at least 😅) Do you want me to help you out applying the aliases to your production code too?

nezamy•3mo ago

Yes sure, I need help the issue is tsconfig in both .wasp/build .wasp/out regenerated every time i run wasp build i'm trying to add this to tsconfig in .wasp/out

"baseUrl": ".",
    "paths": {
      "@/*": ["./ext-src/*"],
      "@ui/*": ["./ext-src/client/components/ui/*"],
    }

"baseUrl": ".",
    "paths": {
      "@/*": ["./ext-src/*"],
      "@ui/*": ["./ext-src/client/components/ui/*"],
    }

it's works in dev mode only

Filip•3mo ago

Yes, that's true and it's tricky. You either have to edit it in after wasp build manually or create a script that does it for you. Do you mind sharing your project? I'll see what I can do 🙂

nezamy•3mo ago

@sodic I created public repo in this link https://github.com/nezamy/wasp-saas It's from open-saas template but I changed the UI and used shadcn UI thanks for your time 🙏

GitHub

GitHub - nezamy/wasp-saas

Contribute to nezamy/wasp-saas development by creating an account on GitHub.

Filip•3mo ago

Ok thanks, I'll try to have a look today! Didn't have time to get into this unfortunately. @nezamy Any luck or you still need our help?

nezamy•3mo ago

@sodic No problem, I decided to Not using aliases for now, I changed the paths and it's built successfully. thanks

Filip•3mo ago

Thanks for the understanding! And I hope we make them happen sooner rather than later

Gaming

Programming

tsconfig paths alias