Vite (Tanstack Router) + Next monorepo

[EliasGit117]

Hi, I'm trying to configure properly monorepo with Vite app along side with NextJS, and I have met some challenges on my path.

I get error

I fixed it by adding paths to tsconfig and tsconfig.app for Vite app

"paths": {
      "@/*": ["./src/*"],
      "@repo/ui/*": ["../../packages/ui/src/*"]
    }` 
    `"paths": {
      "@/*": [
        "./src/*"
      ],
      "@repo/ui/*": [
        "../../packages/ui/src/*"
      ]
    }

And added to vite.config this

export default defineConfig({
  plugins: [
    TanStackRouterVite({ autoCodeSplitting: true }),
    react()
  ],
  server: {
    port: 4000
  },
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, './src') },
      { find: '@repo/ui', replacement: path.resolve(__dirname, '../../packages/ui/src') },
    ]
  }
});

But now I get this error

I've managed to fix it by changing import to

import '@repo/ui/styles/globals.css';

And it all works, BUT, the question, am I doing things right? Or my solution is terrible?

[alessiotortora]

you find a better solution ?

[EliasGit117]

@alessiotortora no, it’s looks like there is no better workaround

[alessiotortora]

i cant solve my issue with this setup, i have tanstack-start. it doesnt update my globals.css. cant figure out why.

bunx --bun shadcn@canary add button
✔ Checking registry.
✔ Installing components.
✔ Created 1 file:

• packages/ui/src/components/button.tsx
  ℹ Updated 2 files:
• packages/ui/src/styles/globals.css
• packages/ui/src/styles/globals.css