Absolute path not working in Vite project React TS

We Are Going To Discuss About Absolute path not working in Vite project React TS. So lets Start this ReactJS Article.

Absolute path not working in Vite project React TS

How to solve Absolute path not working in Vite project React TS

There are two problems here:
Tell typescript how to resolve import path
Tell vite how to build import path
You only tell typescript how to resolve, but vite don’t konw how to build. So refer to the official document resolve.alias, maybe this is what you want:
// vite.config.ts { resolve: { alias: [ { find: '@', replacement: path.resolve(__dirname, 'src') }, ], }, // ... }
You can import path like this (or any module under ./src):
import Test from "@/components/Test"; import bar from "@/foo/bar"
Moreover, you can use vite plugin vite-tsconfig-paths directly, it makes you don’t have to manually configure resolve.alias

Absolute path not working in Vite project React TS

There are two problems here:
Tell typescript how to resolve import path
Tell vite how to build import path
You only tell typescript how to resolve, but vite don’t konw how to build. So refer to the official document resolve.alias, maybe this is what you want:
// vite.config.ts { resolve: { alias: [ { find: '@', replacement: path.resolve(__dirname, 'src') }, ], }, // ... }
You can import path like this (or any module under ./src):
import Test from "@/components/Test"; import bar from "@/foo/bar"
Moreover, you can use vite plugin vite-tsconfig-paths directly, it makes you don’t have to manually configure resolve.alias

Solution 1

There are two problems here:

  • Tell typescript how to resolve import path
  • Tell vite how to build import path

You only tell typescript how to resolve, but vite don’t konw how to build. So refer to the official document resolve.alias, maybe this is what you want:

// vite.config.ts
{
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
    ],
  },
  // ...
}

You can import path like this (or any module under ./src):

import Test from "@/components/Test";
import bar from "@/foo/bar"

Moreover, you can use vite plugin vite-tsconfig-paths directly, it makes you don’t have to manually configure resolve.alias

Original Author Yuns Of This Content

Solution 2

I came here through search results, I was looking for something different, namely, how to do a simple absolute import like import { foo } from 'src/lib/foo.ts'

So if you have a /src directory that contains all code and want to use an absolute import path.

vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      src: path.resolve('src/'),
    },
  }
})

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./"
  }
}

Note that this is a trick: src is an alias, so it appears like the path is absolute in Vite. If you have another directory in the root dir, adjacent to /src, you will need to add another alias for that directory.

Original Author Maciej Krawczyk Of This Content

Solution 3

@Yuns solutions works, but it shows error in vscode. And it was breaking auto-import in vs code.

To make it work in vscode and vite both, I added alias in both tsconfig and vite.config.

// tsconfig.json
{
  "paths": {
      "@/*": ["src/*"]
    }
  // ...
}


// vite.config.ts
{
  resolve: {
   alias: [{ find: '@', replacement: '/src' }],
  },
  // ...
}

Then, I could import like below (svelte app is in src directory)

import Header from '@/components/Header.svelte

Original Author Jashwant Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment