T
TanStackā€¢2mo ago
adverse-sapphire

Building dynamic routes from remote data (start-manifest-plugin error)

Hello! Iā€™m tinkering with Start to free my team from Next.js šŸ˜ I want to programmatically create routes based on data from a remote service, such as a CMS, using the same page template for every route. Initially, I attempted this with virtual file routes: 
const routes = ["/", "/foo", "/bar", "/baz"]

export const routes = rootRoute(
  "templates/root.tsx",
  routes.map((path) => route(path, "templates/page.tsx")),
)
const routes = ["/", "/foo", "/bar", "/baz"]

export const routes = rootRoute(
  "templates/root.tsx",
  routes.map((path) => route(path, "templates/page.tsx")),
)
but without the verboseFileRoutes option, the createFileRoute path argument gets replaced in an infinite loop (React Router v7 solves this problem by passing an unique id per route). I am now trying to disable route generation and manually build the route tree. This approach works wonderfully during development but fails during builds with: 
error during build:
[tanstack-start:start-manifest-plugin] Could not load tanstack-start-manifest:v (imported by node_modules/.pnpm/@tanstack+start-server-core@1.133.20/node_modules/@tanstack/start-server-core/dist/esm/loadVirtualModule.js): Cannot read properties of undefined (reading 'routes')
    at ā€¦
error during build:
[tanstack-start:start-manifest-plugin] Could not load tanstack-start-manifest:v (imported by node_modules/.pnpm/@tanstack+start-server-core@1.133.20/node_modules/@tanstack/start-server-core/dist/esm/loadVirtualModule.js): Cannot read properties of undefined (reading 'routes')
    at ā€¦
I left a repro here with my setup: https://github.com/carloitaben/repro-tanstack-start-serve-manifest Is there any other way of achieving this without having to create route files?
GitHub
GitHub - carloitaben/repro-tanstack-start-serve-manifest
Contribute to carloitaben/repro-tanstack-start-serve-manifest development by creating an account on GitHub.
3 Replies
stormy-gold
stormy-goldā€¢2mo ago
you cannot reuse a file like that this however sounds like it could just be a path param instead of individual routes?
adverse-sapphire
adverse-sapphireOPā€¢2mo ago
Yeah, that's a good idea, it simplifies the whole setup šŸ¤” Let me provide some additional context for clarification. The CMS at my job defines the frontend routes as follows: 
const routes = [
  {
    endpoint: "/page?type=home",
    cache: true,
    paths: {
      en: "/en",
      fr: "/fr",
    }
  },
  {
    endpoint: "/page?type=news",
    cache: false,
    paths: {
      en: "/en/news/[id]",
      fr: "/fr/nouvelles/[id]",
    }
  },
]
const routes = [
  {
    endpoint: "/page?type=home",
    cache: true,
    paths: {
      en: "/en",
      fr: "/fr",
    }
  },
  {
    endpoint: "/page?type=news",
    cache: false,
    paths: {
      en: "/en/news/[id]",
      fr: "/fr/nouvelles/[id]",
    }
  },
]
This object creates the following routes: - en.tsx and fr.tsx - en.news.$id.tsx and fr.nouvelles.$id.tsx I need to find the route configuration based on the path. The configuration is used as follows: - cache: boolean indicates whether the route should return cacheable Cache-Control headers. - endpoint: string specifies where to fetch data for rendering the page content. Initially, I thought about implementing a catch-all route and using the request URL to match some of my routes. However, I'm concerned that this approach might create one large bundle for every route instead of separate bundles for each route. Does Router provide an API to simplify route matching? Perhaps I can resolve this by using path-to-regexp.
stormy-gold
stormy-goldā€¢2mo ago
i dont see how the above helps with bundle size where are the locales encoded?

Did you find this page helpful?