equal-aqua

Code-splitting issue

I recently upgraded from 1.120.18 to 1.126.8. We had been stuck for a while on 1.120 because of the false positive "could not find match from" issue that got solved a few days ago (https://github.com/TanStack/router/pull/4610). But I noticed a big increase in the size of the main JS chunk after build. So far I have traced it down to somewhere between 1.121.2 (ok) and 1.121.12 (ko). Looking a little at which chunks remain, it looks like only the stuff we code-split manually (not through tanstack) is now emitted as a separate chunk, and everything else is in the main chunk. I'm attaching a visualization (done w/ rollup-plugin-visualizer) of the before and after. It's about a 5x increase in gzipped size. We're using basic file routing on tanstack/react-router (no start). We don't touch the tree at all, not virtual routes or anything. The tsr.config is also very basic, with autoCodeSplitting: true. The Vite plugin has no options, but the issue remains unchanged if I try and set a custom codeSplittingOptions.defaultBehavior. I'll try and narrow this down even more. But in the meantime: is this a known issue? Or even an intended behavior change?

7 Replies

genetic-orange•2mo ago

not a known issue

equal-aquaOP•2mo ago

Ok I managed to get a minimal repro based on npx create-tsrouter-app@latest my-app --template file-router and it turns out that the "autoCodeSplitting": true option in tsr.config.json does NOT work anymore. However, the fix is quite simple: just pass in autoCodeSplitting: true to the Vite plugin. Maybe it makes sense because this option does not impact the routeTree generation, but only the build. It was a big surprise though!

genetic-orange•2mo ago

sounds like a bug cc @Sean Cassiere

rival-black•2mo ago

Is there an example of your routes file-tree that can be looked at? Also, how does the Route get exported?

/// a
export const Route = {}

/// b
const Route = {}
export { Route }

/// c
const foo = {}
export { foo as Route }

/// a
export const Route = {}

/// b
const Route = {}
export { Route }

/// c
const foo = {}
export { foo as Route }

And does anything else get exported out of the route files?

equal-aquaOP•2mo ago

The code you get from npx create-tsrouter-app@latest my-app --template file-router reproduces the issue if you change only this: - remove autoCodeSplitting: true from the vite.config - add a tsr.config.json file with { "autoCodeSplitting": true } well, you do need to add a 2nd route with some content if you want to see code-splitting happen at all 🫠

// other.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/other')({
    component: Component,
})

function Component() {
    return (
        <p>{/* 1ko of lorem ipsum */}</p>
    )
}

// other.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/other')({
    component: Component,
})

function Component() {
    return (
        <p>{/* 1ko of lorem ipsum */}</p>
    )
}

if it helps, here's the route file tree of such a codebase

import { Route as rootRouteImport } from './routes/__root'
import { Route as OtherRouteImport } from './routes/other'
import { Route as IndexRouteImport } from './routes/index'

const OtherRoute = OtherRouteImport.update({
  id: '/other',
  path: '/other',
  getParentRoute: () => rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
  id: '/',
  path: '/',
  getParentRoute: () => rootRouteImport,
} as any)

export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/other': typeof OtherRoute
}
export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/other': typeof OtherRoute
}
export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
  '/other': typeof OtherRoute
}
export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: '/' | '/other'
  fileRoutesByTo: FileRoutesByTo
  to: '/' | '/other'
  id: '__root__' | '/' | '/other'
  fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  OtherRoute: typeof OtherRoute
}

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
    '/other': {
      id: '/other'
      path: '/other'
      fullPath: '/other'
      preLoaderRoute: typeof OtherRouteImport
      parentRoute: typeof rootRouteImport
    }
    '/': {
      id: '/'
      path: '/'
      fullPath: '/'
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
  }
}

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  OtherRoute: OtherRoute,
}
export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes<FileRouteTypes>()

import { Route as rootRouteImport } from './routes/__root'
import { Route as OtherRouteImport } from './routes/other'
import { Route as IndexRouteImport } from './routes/index'

const OtherRoute = OtherRouteImport.update({
  id: '/other',
  path: '/other',
  getParentRoute: () => rootRouteImport,
} as any)
const IndexRoute = IndexRouteImport.update({
  id: '/',
  path: '/',
  getParentRoute: () => rootRouteImport,
} as any)

export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
  '/other': typeof OtherRoute
}
export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/other': typeof OtherRoute
}
export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
  '/other': typeof OtherRoute
}
export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths: '/' | '/other'
  fileRoutesByTo: FileRoutesByTo
  to: '/' | '/other'
  id: '__root__' | '/' | '/other'
  fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
  OtherRoute: typeof OtherRoute
}

declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
    '/other': {
      id: '/other'
      path: '/other'
      fullPath: '/other'
      preLoaderRoute: typeof OtherRouteImport
      parentRoute: typeof rootRouteImport
    }
    '/': {
      id: '/'
      path: '/'
      fullPath: '/'
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
  }
}

const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
  OtherRoute: OtherRoute,
}
export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
  ._addFileTypes<FileRouteTypes>()

(i removed the comments to fit discord message limit)

rival-black•2mo ago

I should have some time today. I'll try and take a stab at this. The fix has been merged into main. For whatever reason, CI is being a bit finicky at the moment, so a release hasn't gone through yet. The release has gone through.

rival-black•2mo ago

The fix should now be available in https://github.com/TanStack/router/releases/tag/v1.127.9

GitHub

Release v1.127.9 · TanStack/router

Version 1.127.9 - 7/15/25, 8:26 PM Changes Fix solid-router: prevent client effects running on server (#4621) (ba590c2) by Indrek Ardel router-plugin: composed plugin to consider options from json...

Gaming

Programming

Code-splitting issue

Did you find this page helpful?