Next.js Discord

Discord Forum

Typescript paths alias not resolving from outside frontend folder

Answered
Ariful posted this in #help-forum
Open in Discord
ArifulOP
Hi, I have two directory called frontend and backend. both are completely separated. But now I have to share a file from backend/src/services/trpc.ts file to /frontend/src/services/trpc.ts since I'm using paths instead relative paths I'm getting an error like "from backend @/services/trpc not resolve" but when I use relative path in backend/trpc.ts file everyhting works, plz check the attached photo for more information about the tsconfig file. Thanks

[Note: I tried with ts reference same issue]
Answered by Ariful
@not-milo.tsx thanks for your response I was able to fix the issue, I created a root tsconfig file then I put all the paths alias there, and remove paths from frontend and backend, now it's working,
View full answer

8 Replies

not-milo.tsx
Type aliases work exactly as you configure them. If you want to access something from the frontend that is placed in the backend dir then you'd have to configure an alias like this one in frontend/tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@backend/*": "../backend/src/*"
    },
    // ... other config options
  }
}
Basically what's on the left is replaced by the thing you put on the right. So if the resulting path is invalid you'll get errors.
ArifulOP
@not-milo.tsx thanks for your response, I already tried but it didn't work, I uploaded a simple demo project with the same issue you can check it if you have the time, repo: https://github.com/shakibhasan09/ts-path-problem thanks
not-milo.tsx
The repo is missing a root package.json file
ArifulOP
should I need root package.json file for the ts path alias?
ArifulOP
@not-milo.tsx thanks for your response I was able to fix the issue, I created a root tsconfig file then I put all the paths alias there, and remove paths from frontend and backend, now it's working,
Answer
not-milo.tsx
Glad to hear you managed to solve your issue 😉