📄 tanstack/start/latest/docs/framework/react/guide/path-aliases

Path aliases are a useful feature of TypeScript that allows you to define a shortcut for a path that could be distant in your project's directory structure. This can help you avoid long relative imports in your code and make it easier to refactor your project's structure. This is especially useful for avoiding long relative imports in your code.

By default, TanStack Start does not include path aliases. However, you can easily add them to your project by updating your tsconfig.json file in the root of your project and adding the following configuration:

json

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


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

In this example, we've defined the path alias ~/* that maps to the ./src/* directory. This means that you can now import files from the src directory using the ~ prefix.

After updating your tsconfig.json file, you'll need to install the vite-tsconfig-paths plugin to enable path aliases in your TanStack Start project. You can do this by running the following command:

npm install -D vite-tsconfig-paths


npm install -D vite-tsconfig-paths

Now, you'll need to update your vite.config.ts file to include the following:

// vite.config.ts
import { defineConfig } from 'vite'
import viteTsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [\
      // this is the plugin that enables path aliases\
      viteTsConfigPaths({\
        projects: ['./tsconfig.json'],\
      }),\
    ],
  },
})


// vite.config.ts
import { defineConfig } from 'vite'
import viteTsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [\
      // this is the plugin that enables path aliases\
      viteTsConfigPaths({\
        projects: ['./tsconfig.json'],\
      }),\
    ],
  },
})

Once this configuration has completed, you'll now be able to import files using the path alias like so:

// app/routes/posts/$postId/edit.tsx
import { Input } from '~/components/ui/input'

// instead of

import { Input } from '../../../components/ui/input'


// app/routes/posts/$postId/edit.tsx
import { Input } from '~/components/ui/input'

// instead of

import { Input } from '../../../components/ui/input'

Edit on GitHub

Observability

Tailwind CSS Integration

Partners Become a Partner

scarf analytics