Crash when building default app for Cloudflare

[oof2win2]

Which project does this relate to?

Start

Describe the bug

Crash on build when attempting to build for cloudflare-module as target.

$ vite build
vite v6.3.5 building for production...
Generated route tree in 92ms
✓ 200 modules transformed.
.tanstack/start/build/client-dist/.vite/manifest.json                           2.11 kB │ gzip:  0.50 kB
.tanstack/start/build/client-dist/assets/logo-CHtJT8UQ.svg                      8.61 kB │ gzip:  3.65 kB
.tanstack/start/build/client-dist/assets/styles-CL-3Q1mh.css                   14.74 kB │ gzip:  3.56 kB
.tanstack/start/build/client-dist/assets/index-DbO1V9eu.js                      0.83 kB │ gzip:  0.47 kB
.tanstack/start/build/client-dist/assets/demo.start.api-request-PH23D0AI.js     0.89 kB │ gzip:  0.53 kB
.tanstack/start/build/client-dist/assets/demo.start.server-funcs-DB-hyUWC.js    1.73 kB │ gzip:  0.93 kB
.tanstack/start/build/client-dist/assets/devtools-DvivmTDS.js                  47.52 kB │ gzip: 13.44 kB
.tanstack/start/build/client-dist/assets/main-jjdci18j.js                     306.54 kB │ gzip: 98.66 kB
✓ built in 1.19s
vite v6.3.5 building SSR bundle for production...
"createRequestHandler", "defineHandlerCallback", "transformPipeableStreamWithRouter" and "transformReadableStreamWithRouter" are imported from external module "@tanstack/router-core/ssr/server" but never used in "node_modules/@tanstack/start-server-core/dist/esm/createStartHandler.js" and "node_modules/@tanstack/start-server-core/dist/esm/index.js".
"H3Error", "MIMES", "callNodeListener", "createApp", "createAppEventHandler", "createError", "createEvent", "createRouter", "defineLazyEventHandler", "defineNodeListener", "defineNodeMiddleware", "defineRequestMiddleware", "defineResponseMiddleware", "defineWebSocket", "dynamicEventHandler", "fromNodeMiddleware", "fromPlainHandler", "fromWebHandler", "isCorsOriginAllowed", "isError", "isEventHandler", "isStream", "isWebResponse", "lazyEventHandler", "promisifyNodeListener", "sanitizeStatusCode", "sanitizeStatusMessage", "serveStatic", "splitCookiesString", "toEventHandler", "toNodeListener", "toPlainHandler", "toWebHandler" and "useBase" are imported from external module "h3" but never used in "node_modules/@tanstack/start-server-core/dist/esm/h3.js" and "node_modules/@tanstack/start-server-core/dist/esm/index.js".
✓ 55 modules transformed.
[plugin vite:css-post] Sourcemap is likely to be incorrect: a plugin (vite:css-post) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
✓ built in 209ms
✔ Generated public .output/public                                                                                                                                                                                                                                                                                                                                                          nitro 3:29:25 PM
ℹ Building Nitro Server (preset: cloudflare-module, compatibility date: 2024-11-19)                                                                                                                                                                                                                                                                                                        nitro 3:29:25 PM

 ERROR  RollupError: node_modules/@tanstack/devtools/dist/esm/components/content-panel.js (1:19): "use" is not exported by "node_modules/solid-js/web/dist/server.js", imported by "node_modules/@tanstack/devtools/dist/esm/components/content-panel.js".                                                                                                                                  nitro 3:29:26 PM


1: import { template, use, insert, memo, addEventListener, effect, className, delegateEvents } from "solid-js/web";
                      ^
2: import { useDevtoolsSettings } from "../context/use-devtools-context.js";
3: import { useStyles } from "../styles/use-styles.js";

error during build:
RollupError: node_modules/@tanstack/devtools/dist/esm/components/content-panel.js (1:19): "use" is not exported by "node_modules/solid-js/web/dist/server.js", imported by "node_modules/@tanstack/devtools/dist/esm/components/content-panel.js".
    at getRollupError (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
    at error (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/parseAst.js:397:42)
    at Module.error (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/node-entry.js:16915:16)
    at Module.traceVariable (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/node-entry.js:17367:29)
    at ModuleScope.findVariable (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/node-entry.js:15037:39)
    at ReturnValueScope.findVariable (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/node-entry.js:5626:38)
    at FunctionBodyScope.findVariable (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/node-entry.js:5626:38)
    at ReturnValueScope.findVariable (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/node-entry.js:5626:38)
    at FunctionBodyScope.findVariable (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/node-entry.js:5626:38)
    at Identifier.bind (file:///home/oof2win2/git/cloudflare-bug-repro/node_modules/rollup/dist/es/shared/node-entry.js:5400:40)
error: script "build" exited with code 1

Your Example Website or App

https://github.com/oof2win2/tanstack-cloudflare-bug-repro

Steps to Reproduce the Bug or Issue

1. Install a fresh version via pnpx create-start-app@latest
2. Follow the instructions at https://tanstack.com/start/latest/docs/framework/react/hosting#cloudflare-workers
3. Build the project, observe crash

Expected behavior

The project should build successfully

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.131.7
• OS: debian13
• Bundler: vite
• Bundler Version: 6.3.5

Additional context

No response

[brenelz]

Looks like its coming from the devtools. If you remove them it might work? Still some kind of bug

[oof2win2]

Seems it is working fine without the devtools. Disabling @tanstack/react-router-devtools doesn't do it, need to disable @tanstack/react-devtools

[schiller-manuel]

start now supports the cloudflare vite plugin
please have a look https://tanstack.com/start/latest/docs/framework/react/hosting#cloudflare-workers--official-partner

does this issue still exist then?

[stunaz]

@schiller-manuel no it does not fixes it, the issues really comes from devtools ... somehow loading from solid-js/webin an react application

[schiller-manuel]

devtools are built using solid and wrapped in react

[noahsmiths]

Seems like this was a bug because up until yesterday (this commit from 9/30), the default version of TanStack Devtools installed via the npm create @tanstack/start was version 0.2.2, and the latest version is 0.7.1. In the default package.json created, it was pinned to ^0.2.2, which technically doesn't pin to the most recent major version but instead the left-most non-zero digit, so really it pinned to 0.2.X, meaning that running an npm update or equivalent would never get past this version.

I just ran npm install @tanstack/react-devtools@latest, which fixes it and pins to 0.7.X, but this same issue could rise again if there is another release greater than 0.7.X with significant fixes, so just keep that in mind.

Also, the capitalization of the package imported changed from:

import { TanstackDevtools } from '@tanstack/react-devtools'
to
import { TanStackDevtools } from '@tanstack/react-devtools'

so make sure to update that too wherever you import it. After that, you should be good to build!