compatible-crimson

Path aliases with tanstack start? (SOLVED)

Hello! im trying to prerender my app using tanstack start, i added the config found in the example:

import { defineConfig } from '@tanstack/start/config'

export default defineConfig({
  deployment: {
    prerender: {
      routes: ['/'],
      crawlLinks: true,
    },
  },
})

import { defineConfig } from '@tanstack/start/config'

export default defineConfig({
  deployment: {
    prerender: {
      routes: ['/'],
      crawlLinks: true,
    },
  },
})

But ran into a problem with path aliases. I found this guide that says we can add a plugin to all routers in vinxi to get the same path aliases from tsconfig: https://vinxi.vercel.app/guide/aliases.html but i believe its not possible to use this with tanstack start at the moment? is there an easier way to prerender my app built with tanstack router? i looked into solutions like react-snap but seem unmaintained

Path Aliases | Vinxi

Vinxi Documentation

15 Replies

like-gold•12mo ago

Have you tried adding the vite-tsconfig-paths plugin and determined it didn't work? It seems to work for me:

// app.config.ts
import { defineConfig } from '@tanstack/start/config';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  vite: {
    plugins: () => [tsConfigPaths()],
  },
});

// app.config.ts
import { defineConfig } from '@tanstack/start/config';
import tsConfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  vite: {
    plugins: () => [tsConfigPaths()],
  },
});

compatible-crimsonOP•12mo ago

No sorry it's my first time using vinxi and I'm not really sure what I'm doing, I'll try that when I get home, thanks! @icanflyit Did you actually get this to work? it seems like it does but im getting the same error about imports when trying to run it

like-gold•12mo ago

It works fine for me, how is your tsconfig configured?

dependent-tan•12mo ago

I got it to work by doing what icanflyit recommended in the app.config.ts and then adding this to my tsconfig:

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

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

like-gold•12mo ago

this is what my tsconfig looks like too

compatible-crimsonOP•12mo ago

mine too, thats weird, and i have

"paths": {
      "@/*": ["src/*"],
    }

"paths": {
      "@/*": ["src/*"],
    }

also its working with vite

dependent-tan•12mo ago

Do you have the base url part

compatible-crimsonOP•12mo ago

yea ./

dependent-tan•12mo ago

maybe you can try this: "baseUrl": ".", "paths": { "~/": ["./src/"] }, This is actually what my app.config.ts looks like:

import { defineConfig } from '@tanstack/start/config'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: () => [
      tsConfigPaths({
        projects: ['./tsconfig.json']
      })
    ]
  }
})

import { defineConfig } from '@tanstack/start/config'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: () => [
      tsConfigPaths({
        projects: ['./tsconfig.json']
      })
    ]
  }
})