TanStack
after upgrade router-plugin to v1.121.22, cannot compile successfully project based on the file-based routing with Rspack or Rsbuild
Which project does this relate to?
Router
Describe the bug
before (compile successfully): @tanstack/react-router: 1.116.0 @tanstack/router-plugin: 1.116.1 @rsbuild/core: 1.1.8
after: @tanstack/react-router: 1.121.21 @tanstack/router-plugin: 1.121.22 @rsbuild/core: 1.1.8
error:
error Compile error:
Failed to compile, check the errors for troubleshooting.
× Error: [html-rspack-plugin]: Child compilation failed:
│ × Module parse failed:
│ ╰─▶ × JavaScript parsing error: Expression expected
│ ╭─[1:0]
│ 1 │ <!DOCTYPE html>
│ · ─
│ 2 │ <!--
│ 3 │ NOTE: This HTML file is a template. If you open it directly in the browser,
│ ╰────
│
│ help:
│ File was processed with these loaders:
│ * checkoutroot/node_modules/@rsbuild/core/compiled/html-rspack-plugin/loader.js
│ * checkoutroot/node_modules/unplugin/dist/rspack/loaders/transform.js??tanstack-router:hmr
│ You may need an additional loader to handle the result of these loaders.
Your Example Website or App
''
Steps to Reproduce the Bug or Issue
see description
Expected behavior
please see description
Screenshots or Videos
No response
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response
i notice that the official example (use latest version) works for me. but the way we configurate rsbuild is different. i configurate html template in rsbuild like this:
// rsbuild.default.config.js
defineConfig({
html: {
template: path.join(config.cwd, './public/index.html'),
templateParameters: {
public: base,
},
}
// ...
})
Hey, I am also encountering this problem, and looking for a solution.
i notice that the official example (use latest version) works for me. but the way we configurate rsbuild is different. i configurate html template in rsbuild like this:
// rsbuild.default.config.js defineConfig({ html: { template: path.join(config.cwd, './public/index.html'), templateParameters: { public: base, }, } // ... })
Would you mind share your entire rsbuild.default.config.js? The snippet you provided seems lacking many contexts. Thanks!
can you please provide a complete example project (as a git repo) that reproduces this issue?
Also facing this -- I was able to use TanStackRouterGeneratorRspack as a workaround during development:
TanStackRouterGeneratorRspack({
routesDirectory: "./src/routes",
enableRouteGeneration: true,
}),
but running an rsbuild build with this configuration hangs indefinitely
Yes @schiller-manuel
Check out:
https://github.com/open-crosspost/open-crosspost-ui
bun run dev // should work
bun run build // hangs
Comment and uncomment
https://github.com/open-crosspost/open-crosspost-ui/blob/main/rsbuild.config.ts
plugins: [
// this is workaround to tanstackRouter()
// something broke on around version 1.121
// throws error trying to parse js from index.html
TanStackRouterGeneratorRspack({
routesDirectory: "./src/routes",
enableRouteGeneration: true,
}),
// broken:
// tanstackRouter({
// routesDirectory: "./src/routes",
// enableRouteGeneration: true,
// }),
],
@schiller-manuel
// import { tanstackRouter } from "@tanstack/router-plugin/rspack"; // broken
import { TanStackRouterGeneratorRspack } from "@tanstack/router-plugin/rspack"; // works in dev
@elliotBraem cannot reproduce this on my machine. both variants finish.
@schiller-manuel what machine? I'm macOS
I've just now upgraded to
"@rsbuild/core": "^1.3.22", "@tanstack/router-plugin": "^1.121.25",
For me with tanstackRouter, dev build will complete but opening the site shows:
but TanStackRouterGeneratorRspack dev will show site for HMR.
I notice now that Production build did work with tanstackRouter, after taking a lot of time
Generated route tree in 236ms // this logged, and then LONG +30 sec pause, then next logs
● web ━━━━━━━━━━━━━━━━━━━━━━━━━ (10%) make Generated route tree in 4ms
● web ━━━━━━━━━━━━━━━━━━━━━━━━━ (100%) emitting after emit ready built in 1.11 m
Maybe it's related to hot reload, cwd -- why is it trying to parse my html as javascript?
│ help:
│ File was processed with these loaders:
│ * commonjs|/Users/ebraem/workspace/crosspost/open-crosspost-ui/node_modules/@rsbuild/core/compiled/html-rspack-plugin/loader.js
│ * module|/Users/ebraem/workspace/crosspost/open-crosspost-ui/node_modules/unplugin/dist/rspack/loaders/transform.js??tanstack-router:hmr
│ You may need an additional loader to handle the result of these loaders.
│
│ × Module parse failed:
│ ╰─▶ × JavaScript parsing error: Expected ';', '}' or <eof>
│ ╭─[1:10]
│ 1 │ <!doctype html>
│ · ────
hm your instructions above said
bun run dev // should work bun run build // hangs
and both of those worked for me for both plugins
It's okay, at least I'm unblocked with both a production and dev build, thanks for investigating.
Can anyone else confirm the issue? @tcdw @qiuzhangxi77
If anybody runs into this issue, this is my current fix:
import { tanstackRouter, TanStackRouterGeneratorRspack } from "@tanstack/router-plugin/rspack";
return defineConfig({
html: {
template: "./index.html",
templateParameters: { ... }
}
tools: {
rspack: {
plugins: [
{
...(isProduction || isStaging ? tanstackRouter({
routesDirectory: "./src/routes",
enableRouteGeneration: true,
}) : TanStackRouterGeneratorRspack({
routesDirectory: "./src/routes",
enableRouteGeneration: true,
})),
}
],
}
}
});
i see the issue with the dev server now with tanstackRouter.
× Module parse failed:
│ ╰─▶ × JavaScript parsing error: Expected ';', '}' or <eof>
│ ╭─[1:10]
│ 1 │ <!doctype html>
│ · ────
│ 2 │ <html lang="en">
│ 3 │ <head>
│ ╰────
│ help:
│ File was processed with these loaders:
│ * module|/private/tmp/open-crosspost-ui/node_modules/unplugin/dist/rspack/loaders/transform.js??tanstack-router:hmr
│ * commonjs|/private/tmp/open-crosspost-ui/node_modules/@rsbuild/core/compiled/html-rspack-plugin/loader.js
│ You may need an additional loader to handle the result of these loaders.
however, when debugging, I don't see the router plugin ever handling the html
My Cloudflare deploy is actually failing, app builds but then dies after with:
17:03:08.197 | ✘ [ERROR] Error: Pages only supports files up to 25 MiB in size
-- | --
17:03:08.197 |
17:03:08.197 | @rspack/binding-linux-x64-gnu/rspack.linux-x64-gnu.node is 59.7 MiB in size
but this seems unrelated? if the rspack .node file is bigger than 25 MB?
I think this means the build is completing but the build time artificat rspack binding is leaking into the page's bundle, so Cloudflare breaks -- this didn't happen in earlier versions of the router plugin. I face the same exact issue as the original poster: updating router plugin cannot compile with rsbuild.
I definitely notice a performance hit on my machine when building now. May or may not be related, but I see a lot of rg processes coming from VSCode, which is related to following symlinks https://github.com/microsoft/vscode/issues/98594.
Investigating:
TanStackRouterGeneratorRspack (unpluginRouterGeneratorFactory) works in dev build, has a long but successful production build
tanstackRouter (unpluginRouterComposedFactory) "builds" in dev, but shows html parser error in browser. Has a long but successful production build.
Both break when deployed + building on Cloudflare
Why does unpluginRouterGeneratorFactory work in dev and not unpluginRouterComposedFactory?
unpluginRouterGeneratorFactory is much simpler than unpluginRouterComposedFactory.
The default behavior of unpluginRouterComposedFactory is:
- Only
unpluginRouterGeneratorFactoryin production (they both do build, but intense) unpluginRouterGeneratorFactoryandunpluginRouterHmrFactoryin development
unpluginRouterHmrFactory must have some issue in development in how it works with html-template plugin.
When we build, how big is the AST tree? This was an ai suggestion:
"This is a common issue with unplugin or similar bundler plugin APIs when filter.code is used without a sufficiently restrictive filter.id"
transform: {
filter: {
// 1. **ADD AN ID FILTER** to only process JavaScript/TypeScript files.
// This is crucial to prevent HTML from being passed to `parseAst`.
// The regex below covers .js, .jsx, .ts, .tsx extensions.
id: /\.(m|c)?(j|t)sx?$/,
code: 'createFileRoute(',
},
handler(code, id) {
if (!globalThis.TSR_ROUTES_BY_ID_MAP?.has(id)) {
return null // Correctly skip if not a recognized route file
}
if (debug) console.info('Adding HMR handling to route ', id)
// 2. **MOVE parseAst AFTER THE ID CHECK**
// This ensures `parseAst` is only called on files that are
// identified as actual route files that need HMR.
const ast = parseAst({ code }) // This line was problematic before the check
ast.program.body.push(routeHmrStatement)
const result = generateFromAst(ast, {
sourceMaps: true,
filename: id,
sourceFileName: id,
})
if (debug) {
logDiff(code, result.code)
console.log('Output:\n', result.code + '\n\n')
}
return result
},
},
Why does unpluginRouterGeneratorFactory consume so many resources?
https://github.com/TanStack/router/blob/main/packages/router-plugin/src/core/router-generator-plugin.ts
Still stumped here... chokidar mayber?
Is this related? fix: correctly pass 'create' event to generator for rspack/webpack
this might be an unplugin issue. if you just comment out everything in the transform handler, the error still occurs. it looks like that just because a transform handler is present, and even if it does not modify the file (as is the case with the html file), rspack treats the unmodified result as JS and tries to parse it (which fails for html).
attach my reproduce demo A concise rsbuild configuration that can reproduce the problem is given @tcdw @schiller-manuel