`autoCodeSplitting` Not Working on `Vite` in Windows

[greenhat616]

Which project does this relate to?

Router

Describe the bug

When enabling autoCodeSplitting in Vite, the expected chunk splitting does not occur on Windows. However, the behavior works correctly on Linux.

And here is a related issue: https://github.com/TanStack/router/issues/2167#issuecomment-2358873915

Linux Output:

Run pnpm build

> reproduce-vite-code-splitting@0.0.0 build /home/runner/work/reproduce-vite-code-splitting/reproduce-vite-code-splitting
> vite build

♻️  Generating routes...
✅ Processed routes in 121ms
vite v5.4.6 building for production...
transforming...
✓ 102 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                  0.65 kB │ gzip:  0.36 kB
dist/assets/about-B19ju1L8.js    0.16 kB │ gzip:  0.16 kB
dist/assets/index-DxpCI4tz.js    0.17 kB │ gzip:  0.16 kB
dist/assets/index-BGUdPL3l.js  247.91 kB │ gzip: 77.05 kB
✓ built in 1.18s

Windows Output:

Run pnpm build

> reproduce-vite-code-splitting@0.0.0 build D:\a\reproduce-vite-code-splitting\reproduce-vite-code-splitting
> vite build

♻️  Generating routes...
✅ Processed routes in 175ms
vite v5.4.6 building for production...
transforming...
✓ 99 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                  0.66 kB │ gzip:  0.37 kB
dist/assets/index-DFz3RJcM.js  246.41 kB │ gzip: 76.30 kB
✓ built in 1.51s

On Linux and macOS, the build process successfully splits the assets into separate chunks as expected, with clear differences in the output size of the files. In contrast, on Windows, chunk splitting does not occur, resulting in a single large JavaScript file, which is contrary to the intended behavior of the autoCodeSplitting feature.

This discrepancy between operating systems suggests that there may be environment-specific factors affecting the code-splitting functionality in Vite on Windows.

Your Example Website or App

https://github.com/greenhat616/reproduce-vite-code-splitting

Steps to Reproduce the Bug or Issue

1. use the starter of @tanstack/router
2. run pnpm build

Expected behavior

As a user, I hope the code splitting works as expect on other platforms.

Screenshots or Videos

Nope. The CI output is enough.

Platform

• OS: Windows
• Browser: Not related
• Version: Not related

Additional context

https://github.com/greenhat616/reproduce-vite-code-splitting/actions/runs/10926568001

[schiller-manuel]

can you please rerun with the env var TSR_VITE_DEBUG=true and post the result here?

[greenhat616]

@schiller-manuel I don't know why the debug info is not produced in windows.

Here is the CI output:

Run pnpm build
  pnpm build
  shell: C:\Program Files\PowerShell\7\pwsh.EXE -command ". '{0}'"
  env:
    PNPM_HOME: C:\Users\runneradmin\setup-pnpm\node_modules\.bin
    STORE_PATH: D:\.pnpm-store\v3
    TSR_VITE_DEBUG: true

> reproduce-vite-code-splitting@0.0.0 build D:\a\reproduce-vite-code-splitting\reproduce-vite-code-splitting
> vite build

♻️  Generating routes...
✅ Processed routes in 164ms
vite v5.4.6 building for production...
transforming...
✓ 99 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                  0.66 kB │ gzip:  0.37 kB
dist/assets/index-DFz3RJcM.js  246.41 kB │ gzip: 76.30 kB
✓ built in 1.53s

The run log of CI: https://github.com/greenhat616/reproduce-vite-code-splitting/actions/runs/10926802588/job/30331522968

And I test it manually on my desktop:

[schiller-manuel]

maybe try pnpm dev locally?

[greenhat616]

@schiller-manuel Nope. And I have figure out why the logs is not output in windows.

Causes is the wrong impl in fileIsInRoutesDirectory.

I modify the file in node_modules:

transformInclude(transformId) {
      // console.info("transformId", transformId)
      if (!userConfig.autoCodeSplitting) {
        // console.info("Auto code splitting is disabled.");
        return void 0;
      }
      let id = transformId;
      if (id.startsWith(JoinedSplitPrefix)) {
        id = id.replace(JoinedSplitPrefix, "");
      }
      if (transformId.includes("routes")) {
        console.info("transformInclude", id, "routesDirectory", userConfig.routesDirectory)
      }
      if (fileIsInRoutesDirectory(id, userConfig.routesDirectory) || id.includes(splitPrefix)) {
        console.info("transformInclude", id)
        return true;
      }
      return false;
    },

The outputs was:

unpluginRouterComposedFactory { autoCodeSplitting: true } { framework: 'vite' }
unpluginRouterCodeSplitterFactory { autoCodeSplitting: true } { framework: 'vite' }
debug true
unpluginRouterComposedFactory [
  {
    name: 'router-generator-plugin',
    watchChange: [AsyncFunction: watchChange],
    vite: { configResolved: [AsyncFunction: configResolved] },
    rspack: [AsyncFunction: rspack],
    webpack: [AsyncFunction: webpack]
  }
] [
  {
    name: 'router-code-splitter-plugin',
    enforce: 'pre',
    resolveId: [Function: resolveId],
    transform: [Function: transform],
    transformInclude: [Function: transformInclude],
    vite: { configResolved: [Function: configResolved] },
    rspack: [Function: rspack],
    webpack: [Function: webpack]
  }
]
ROOT G:/Programs/Node.js/reproduce-vite-code-splitting
userConfig {
  routeFileIgnorePrefix: '-',
  routesDirectory: 'G:\\Programs\\Node.js\\reproduce-vite-code-splitting\\src\\routes',
  generatedRouteTree: 'G:\\Programs\\Node.js\\reproduce-vite-code-splitting\\src\\routeTree.gen.ts',
  quoteStyle: 'single',
  semicolons: false,
  disableTypes: false,
  addExtensions: false,
  disableLogging: false,
  disableManifestGeneration: false,
  apiBase: '/api',
  routeTreeFileHeader: [
    '/* prettier-ignore-start */',
    '/* eslint-disable */',
    '// @ts-nocheck',
    '// noinspection JSUnusedGlobalSymbols'
  ],
  routeTreeFileFooter: [ '/* prettier-ignore-end */' ],
  autoCodeSplitting: true,
  indexToken: 'index',
  routeToken: 'route'
}

♻️  Generating routes...
✅ Processed routes in 66ms
vite v5.4.6 building for production...
transformInclude G:/Programs/Node.js/reproduce-vite-code-splitting/src/routes/__root.tsx routesDirectory G:\Programs\Node.js\reproduce-vite-code-splitting\src\routes
transformInclude G:/Programs/Node.js/reproduce-vite-code-splitting/src/routes/index.tsx routesDirectory G:\Programs\Node.js\reproduce-vite-code-splitting\src\routes
transformInclude G:/Programs/Node.js/reproduce-vite-code-splitting/src/routes/about.tsx routesDirectory G:\Programs\Node.js\reproduce-vite-code-splitting\src\routes
✓ 99 modules transformed.
dist/index.html                  0.65 kB │ gzip:  0.36 kB
dist/assets/index-DFz3RJcM.js  246.41 kB │ gzip: 76.30 kB
✓ built in 432ms

And add process.normalize to fileIsInRoutesDirectory could make the output work.

I suppose to draft a pr later to solve it.