Posted on Apr 30, 2022

Setup path aliases w/ React + Vite + TS

Out of the box vite doesn't provide "@" path alias to src, so we have to manually setup it. I suppose you're using Vite preset for react-ts.

Steps to setup this:

Step 1

vite.config.ts:

// also don't forget to `npm i -D @types/node`, so __dirname won't complain import * as path from 'path' export default defineConfig({ plugins: [react()], resolve: { alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], }, })

This would tell Vite about the alias.

Step 2

We're adding "@" alias for src directory (ts needs this).

tsconfig.json:

{ "compilerOptions": { // ...rest of the template "types": ["node"], "paths": { "@/*": ["./src/*"] } }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] }

Usage

import Comp from '@/components/Comp'

Top comments (12)

Anna • May 21 '22

Does this work for nested paths? I'm trying to do something like this, and the nested folder isn't working for me:

{ "compilerOptions": { "baseUrl": ".", ... "paths": { "*": ["src/*", "node_modules/*"], "components/*": ["src/components/*"], "containers/*": ["src/containers/*"], "pages/*": ["src/constants/*"], "store/*": ["src/store/*"], "types/*": ["src/types/*"], "NestedFolder/*": [ "src/components/NestedFolder/*" ], } }, "include": ["src/**/*", "*"] }