Monorepo example

[tl-frameplay]

Hey guys, we appreciate you sharing this great library.

So far, everything is amazing, but we are having issues strongly type using a monorepo. Before we say which monorepo to avoid promoting one over the other; do you have any examples how tanstack router is meant to work for Typescript in a monorepo?

Specifically, we have a monorepo package called "router", where tanstack router is installed, and the actual "router" file in an app of the monorepo where all the routes are configured and the router exported for the app.

Thank you kindly.

[rahulretnan]

With Nx Workspace, I updated the Vite Config as follows:

/// <reference types='vitest' />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { TanStackRouterVite } from '@tanstack/router-vite-plugin';
import { join } from 'path';

export default defineConfig({
  root: __dirname,
  cacheDir: '../../node_modules/.vite/apps/web',

  server: {
    port: 4200,
    host: 'localhost',
  },

  preview: {
    port: 4300,
    host: 'localhost',
  },

  plugins: [
    react(),
    TanStackRouterVite({
      routesDirectory: join(__dirname, 'src/routes'),
      generatedRouteTree: join(__dirname, 'src/routeTree.gen.ts'),
      routeFileIgnorePrefix: '-',
      quoteStyle: 'single',
    }),
    nxViteTsPaths(),
  ],

  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [ nxViteTsPaths() ],
  // },

  build: {
    outDir: '../../dist/apps/web',
    reportCompressedSize: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },

  test: {
    globals: true,
    cache: {
      dir: '../../node_modules/.vitest',
    },
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],

    reporters: ['default'],
    coverage: {
      reportsDirectory: '../../coverage/apps/web',
      provider: 'v8',
    },
  },
});

[DNYLA]

I've set this up but was wondering how would i allow other libraries to share the types for my router so when using navigate() or Link i have full type saftey.

[bzbetty]

@rahulretnan do you find the watch still works? as soon as I add in a root: __dirname it regens fine on startup but seems to fail on changes.

[sohamnandi77]

Hi @tl-frameplay @rahulretnan , can you please help me in figuring out how routing will work in Microfrontend architecture.. I am using turborepo and tanstack Router
I am just now sure, routing which are defined in packages will work in apps

[mer10z]

I'm also using turborepo and trying to figure out how to do this. Currently we have a number of packages that are router agnostic and one app package that declares the router module. Now I'm trying to split up that app into multiple packages that all use the same router with type checking, but I'm not sure how to do it without creating a circular dependency between the packages. I've tried a few hacky things that didn't work and will continue trying, but if anyone has a solution to this it would be great to hear. We're not using file based routing so TanStackRouterVite isn't an option.

[davidturissini]

I'm starting to tackle this exact problem in our app. We are also using a monorepo setup. We have a top level "app" package that imports lots of other packages that are more focused on components, specific business logic, etc. We want the lower level library packages to be able to participate in Tanstack router's type safety. The problem is that we've defined all of the routes on the "app" level and the children packages cannot take a dependency on "app" because, well, circular dependencies and all the fun that comes with that.

But since we only care about making the types available to all children packages, I'm exploring adding a small typescript task that just outputs the route's d.ts file into a lower level package that can be consumed by everyone. This seems to solve the circular dependency problem. This new "router" package does not contain any source code references back to the app. It's basically as if a developer manually copied the d.ts file and exported it.

Still working out how this plays out long term but its very promising so far.

[sohamnandi77]

I guess, @tannerlinsley finally heard us.😅 He is including a example of tanstack router in monorepo. Thanks, Really, appreciate the Effort. ✨

Basic:
https://github.com/tanstack/router/tree/main/examples/react/router-monorepo-simple

With React Query:

https://github.com/TanStack/router/tree/main/examples/react/router-monorepo-react-query

[schiller-manuel]

actually this was added by @beaussan :)