Why don't absolute paths works in TurboRepo

Question

I've set up a new project on the latest version of TurboRepo. In the 'apps' directory, I've created a new Vite project using the 'react-swc-ts' template. I've modified the 'tsconfig.json' of the Vite project:

/* Import */
"baseUrl": "./src",
"paths": {
  "~/*": ["./*"]
},

And installed the 'vite-tsconfig-paths' plugin from https://www.npmjs.com/package/vite-tsconfig-paths, adding it to 'vite.config.ts'.

plugins: [react(), tsconfigPaths()]

This usually works for me, but for some reason, it's not working in TurboRepo. I also tried following this guide https://dev.to/andrewezeani/how-to-create-absolute-imports-in-vite-react-app-a-step-by-step-guide-28co, but that didn't work either. What am I doing wrong?

Answer 1

Change your vision and see the tsconfig.json from root to src folder:

/* Import */
"baseUrl": "./",
"paths": {
  "~": ["./src"],
  "~/*": ["./src/*"],
},

For the vite.config.ts, I'm not sure but based on docs on the vite.config.js file your config should be like the following:

resolve: {
  alias: {
    "~": "/src",
  },
},