Skip to content

Incompatibility with Cloudflare Vite Plugin #375

Open
Open
Incompatibility with Cloudflare Vite Plugin#375

Description

@randreu28
randreu28
opened on Mar 10, 2026

TanStack Devtools version

0.9.9

Framework/Library version

Tanstack start RC (1.132.0)

Describe the bug and the steps to reproduce it

  1. Create a tanstack start project from scratch

  2. Follow the official guide for configuring tanstack start with cloudflare:

https://tanstack.com/start/latest/docs/framework/react/guide/hosting#cloudflare-workers--official-partner

  1. Install the different tanstack plugins.

I managed to replicate them using these versions:

  • "@tanstack/react-query-devtools": "^5.84.2"
  • "@tanstack/react-form-devtools": "^0.2.17"
  • "@tanstack/react-pacer-devtools": "^0.5.2"
  • "@tanstack/react-router-devtools": "^1.132.0"
  1. Try to import the plugins and add them to <TanStackDevTools/>
function RootDocument({ children }: Props) {
	return (
		<html>
			<head>
				<HeadContent />
			</head>
			<body>
				<TanStackDevtools
					plugins={[
						{
							name: "Tanstack Router",
							render: <TanStackRouterDevtoolsPanel />,
						},
						{
							name: "Tanstack Query",
							render: <ReactQueryDevtoolsPanel />,
						},
						// These last two break the app when executing anything SSR
						{
							name: "Tanstack Form",
							render: <FormDevtoolsPanel />,
						},
						{
							name: "Tanstack Pacer",
							render: <PacerDevtoolsPanel />,
						},
					]}
				/>
				<Scripts />
			</body>
		</html>
	);
}

The issue only occurs when executing anything SSR:

✘ [ERROR] No matching export in "node_modules/.pnpm/solid-js@1.9.10/node_modules/solid-js/web/dist/server.js" for import "use"

    node_modules/.pnpm/@tanstack+devtools-utils@0.3.1_@types+react@19.2.2_csstype@3.1.3_react@19.2.0_solid-js@1.9.10/node_modules/@tanstack/devtools-utils/dist/solid/esm/dev.js:1:34:
      1 │ ...eateComponent, insert, use, template } from 'sol...
        ╵                           ~~~

Plugins affected

Funningly enough, this only happens with certain plugins. Some plugins work and some other's don't. Here's the list of what I've experienced:

  • Tanstack Router ✔️
  • Tanstack Query ✔️
  • Tanstack Pacer ❌
  • Tanstack Form ❌

Temporary fix

The issue disapears when I remove the cloudflare plugin. As I use this only for develpoment purposes, I can simply comment the code out, use the plugin and then put it back in when im done with development.

Thank you!

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://github.com/randreu28/devtools_issue_375

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms & Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Activity

  1. randreu28
    changed the title [-]Incopatbility with Cloudflare[/-] [+]Incopatbility with Cloudflare Vite Plugin[/+] on Mar 10, 2026

  2. github-actions commented on Mar 10, 2026

    @github-actions
    github-actionsBot
    on Mar 10, 2026 – with GitHub Actions
    Contributor

    Hi @randreu28, thanks for reporting this! The bug description and reproduction steps are very thorough 🙏

    However, the Minimal, Reproducible Example field is a required part of the bug report template, and it looks like it wasn't filled in. Could you please provide a link to a minimal reproduction (e.g. a CodeSandbox or StackBlitz project)?

    A runnable example helps maintainers verify and debug the issue much faster. You can fork one of the official examples as a starting point if that's easier.

    Thanks!

  3. randreu28 commented on Mar 10, 2026

    @randreu28
    randreu28
    on Mar 10, 2026
    Author

    Added a reproducable example

  4. randreu28
    changed the title [-]Incopatbility with Cloudflare Vite Plugin[/-] [+]Incompatibility with Cloudflare Vite Plugin[/+] on Mar 10, 2026

  5. AlemTuzlak commented on Mar 10, 2026

    @AlemTuzlak
    AlemTuzlak
    on Mar 10, 2026
    Collaborator

    This should be a by-product of the changes to the architecture of the new plugins, working on it already

  6. harry-whorlow commented on Mar 10, 2026

    @harry-whorlow
    harry-whorlow
    on Mar 10, 2026
    Collaborator

    Form's plugin is here, I'm just working on the bundling

  7. harry-whorlow commented on Mar 12, 2026

    @harry-whorlow
    harry-whorlow
    on Mar 12, 2026
    Collaborator

    @randreu28 if you update tanstack form's plugin and confirm if it's fixed it would be incredibly helpful 🙏

  8. randreu28 commented on Mar 13, 2026

    @randreu28
    randreu28
    on Mar 13, 2026
    Author

    Hello! Thank you for the quick reply 🚀

    The issue still remains. You can see the dependency versions I used for my test here:

    randreu28/devtools_issue_375@3957a9e

    I also tried testing it only using the form's plugin and the error still remains the same:

    pnpm run dev

> devtools_issue_375@ dev /redacted/devtools_issue_375
> vite dev --port 3000


  VITE v7.3.1  ready in 4228 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  Debug:   http://localhost:3000/__debug
  ➜  press b + enter to list configured Cloudflare bindings
  ➜  press h + enter to show help
✘ [ERROR] No matching export in "node_modules/.pnpm/solid-js@1.9.11/node_modules/solid-js/web/dist/server.js" for import "setStyleProperty"

    node_modules/.pnpm/@tanstack+pacer-devtools@1.1.3_@tanstack+pacer@0.19.0_@types+react@19.2.14_csstype@3.2.3_react@19.2.4/node_modules/@tanstack/pacer-devtools/dist/components/Shell.js:7:69:
      7 │ import { className, createComponent, delegateEvents, effect, insert, setStyleProperty, template } from "solid-js/web";
        ╵                                                                      ~~~~~~~~~~~~~~~~

11:25:12 AM [vite] (ssr) error while updating dependencies:
Error: Error during dependency optimization:

✘ [ERROR] No matching export in "node_modules/.pnpm/solid-js@1.9.11/node_modules/solid-js/web/dist/server.js" for import "setStyleProperty"

    node_modules/.pnpm/@tanstack+pacer-devtools@1.1.3_@tanstack+pacer@0.19.0_@types+react@19.2.14_csstype@3.2.3_react@19.2.4/node_modules/@tanstack/pacer-devtools/dist/components/Shell.js:7:69:
      7 │ ...Events, effect, insert, setStyleProperty, template } from "solid...
        ╵                            ~~~~~~~~~~~~~~~~


    at failureErrorWithLog (/redacted/devtools_issue_375/node_modules/.pnpm/esbuild@0.27.3/node_modules/esbuild/lib/main.js:1467:15)
    at /redacted/devtools_issue_375/node_modules/.pnpm/esbuild@0.27.3/node_modules/esbuild/lib/main.js:926:25
    at /redacted/devtools_issue_375/node_modules/.pnpm/esbuild@0.27.3/node_modules/esbuild/lib/main.js:1345:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
Error: The file does not exist at "/redacted/devtools_issue_375/node_modules/.vite/deps_ssr/@tanstack_react-query-devtools.js?v=41cc249a" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.
    at CustomModuleRunner.cachedModule (workers/runner-worker.js:1196:20)
    ... 8 lines matching cause stack trace ...
    at CustomModuleRunner.cachedRequest (workers/runner-worker.js:1084:73) {
  cause: Error: The file does not exist at "/redacted/devtools_issue_375/node_modules/.vite/deps_ssr/@tanstack_react-query-devtools.js?v=41cc249a" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.
      at CustomModuleRunner.cachedModule (workers/runner-worker.js:1196:20)
      at request (workers/runner-worker.js:1123:83)
      at /redacted/devtools_issue_375/src/routes/__root.tsx:8:31
      at Object.runInlinedModule (workers/runner-worker.js:1314:4)
      at CustomModuleRunner.directRequest (workers/runner-worker.js:1166:59)
      at CustomModuleRunner.cachedRequest (workers/runner-worker.js:1084:73)
      at /redacted/devtools_issue_375/src/routeTree.gen.ts:11:1
      at Object.runInlinedModule (workers/runner-worker.js:1314:4)
      at CustomModuleRunner.directRequest (workers/runner-worker.js:1166:59)
      at CustomModuleRunner.cachedRequest (workers/runner-worker.js:1084:73) {
    remote: true
  },
  status: 500,
  statusText: undefined,
  headers: undefined,
  data: undefined,
  body: undefined,
  unhandled: true
}

  9. harry-whorlow commented on Mar 13, 2026

    @harry-whorlow
    harry-whorlow
    on Mar 13, 2026
    Collaborator

    @randreu28, can you give me the error from Form? Pacer although merged, hasn’t been released and published yet

  10. randreu28 commented on Mar 16, 2026

    @randreu28
    randreu28
    on Mar 16, 2026
    Author

    @harry-whorlow It's the same.

    This is the code that I used to replicate it. It's the same as my original minimal reproducable example, but exclusively with the form plugin.

    https://github.com/randreu28/devtools_issue_375/tree/form-only

    pnpm run dev

> devtools_issue_375@ dev /redacted/devtools_issue_375
> vite dev --port 3000

Default inspector port 9229 not available, using 9230 instead

Port 3000 is in use, trying another one...

  VITE v7.3.1  ready in 5088 ms

  ➜  Local:   http://localhost:3001/
  ➜  Network: use --host to expose
  ➜  Debug:   http://localhost:3001/__debug
  ➜  press b + enter to list configured Cloudflare bindings
  ➜  press h + enter to show help
✘ [ERROR] No matching export in "node_modules/.pnpm/solid-js@1.9.11/node_modules/solid-js/web/dist/server.js" for import "setStyleProperty"

    node_modules/.pnpm/@tanstack+pacer-devtools@1.1.3_@tanstack+pacer@0.19.0_@types+react@19.2.14_csstype@3.2.3_react@19.2.4/node_modules/@tanstack/pacer-devtools/dist/components/Shell.js:7:69:
      7 │ import { className, createComponent, delegateEvents, effect, insert, setStyleProperty, template } from "solid-js/web";
        ╵                                                                      ~~~~~~~~~~~~~~~~

10:13:04 AM [vite] (ssr) error while updating dependencies:
Error: Error during dependency optimization:

✘ [ERROR] No matching export in "node_modules/.pnpm/solid-js@1.9.11/node_modules/solid-js/web/dist/server.js" for import "setStyleProperty"

    node_modules/.pnpm/@tanstack+pacer-devtools@1.1.3_@tanstack+pacer@0.19.0_@types+react@19.2.14_csstype@3.2.3_react@19.2.4/node_modules/@tanstack/pacer-devtools/dist/components/Shell.js:7:69:
      7 │ ...Events, effect, insert, setStyleProperty, template } from "solid...
        ╵                            ~~~~~~~~~~~~~~~~


    at failureErrorWithLog (/redacted/devtools_issue_375/node_modules/.pnpm/esbuild@0.27.3/node_modules/esbuild/lib/main.js:1467:15)
    at /redacted/devtools_issue_375/node_modules/.pnpm/esbuild@0.27.3/node_modules/esbuild/lib/main.js:926:25
    at /redacted/devtools_issue_375/node_modules/.pnpm/esbuild@0.27.3/node_modules/esbuild/lib/main.js:1345:9
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
Error: The file does not exist at "/redacted/devtools_issue_375/node_modules/.vite/deps_ssr/@tanstack_react-query-devtools.js?v=b3d885e0" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.
    at CustomModuleRunner.cachedModule (workers/runner-worker.js:1196:20)
    ... 8 lines matching cause stack trace ...
    at CustomModuleRunner.cachedRequest (workers/runner-worker.js:1084:73) {
  cause: Error: The file does not exist at "/redacted/devtools_issue_375/node_modules/.vite/deps_ssr/@tanstack_react-query-devtools.js?v=b3d885e0" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.
      at CustomModuleRunner.cachedModule (workers/runner-worker.js:1196:20)
      at request (workers/runner-worker.js:1123:83)
      at /redacted/devtools_issue_375/src/routes/__root.tsx:8:31
      at Object.runInlinedModule (workers/runner-worker.js:1314:4)
      at CustomModuleRunner.directRequest (workers/runner-worker.js:1166:59)
      at CustomModuleRunner.cachedRequest (workers/runner-worker.js:1084:73)
      at /redacted/devtools_issue_375/src/routeTree.gen.ts:11:1
      at Object.runInlinedModule (workers/runner-worker.js:1314:4)
      at CustomModuleRunner.directRequest (workers/runner-worker.js:1166:59)
      at CustomModuleRunner.cachedRequest (workers/runner-worker.js:1084:73) {
    remote: true
  },
  status: 500,
  statusText: undefined,
  headers: undefined,
  data: undefined,
  body: undefined,
  unhandled: true
}

  11. harry-whorlow commented on Mar 16, 2026

    @harry-whorlow
    harry-whorlow
    on Mar 16, 2026
    Collaborator

    Okay, I'll take a look after work.

  12. chshouyu commented on Mar 20, 2026

    @chshouyu
    chshouyu
    on Mar 20, 2026

    I found some other errors, when modifying a route file that incorporates createServerFn, it sometimes throws an error like this:

    [Client] %o

%s

%s
 {} The above error occurred in the <MatchInnerImpl> component. React will try to recreate this component tree from scratch using the error boundary you provided, CatchBoundaryImpl.
[Client] Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!
[Client] Warning: Error: The Workers runtime canceled this request because it detected that your Worker's code had hung and would never generate a response. Refer to: https://developers.cloudflare.com/workers/observability/errors/
    at async Object.fetch (file:///Users/chenshouyu/test-demos/react-demos/tanstack-start-cf/node_modules/.pnpm/miniflare@4.20260317.0/node_modules/miniflare/dist/src/workers/core/entry.worker.js:4622:22)
Warning: A promise was resolved or rejected from a different request context than the one it was created in. However, the creating request has already been completed or canceled. Continuations for that request are unlikely to run safely and have been canceled. If this behavior breaks your worker, consider setting the `no_handle_cross_request_promise_resolution` compatibility flag for your worker.
    at CustomModuleRunner.import (workers/runner-worker/vite/module-runner:1061:10)

    or like this:

    [Client] %o

%s

%s
 {} The above error occurred in the <link> component. React will try to recreate this component tree from scratch using the error boundary you provided, CatchBoundaryImpl.
[Client] Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!
[Client] Warning: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

    or like this:

    Warning: A promise was resolved or rejected from a different request context than the one it was created in. However, the creating request has already been completed or canceled. Continuations for that request are unlikely to run safely and have been canceled. If this behavior breaks your worker, consider setting the `no_handle_cross_request_promise_resolution` compatibility flag for your worker.
    at CustomModuleRunner.import (workers/runner-worker/vite/module-runner:1061:10)

  13. randreu28 commented on Mar 23, 2026

    @randreu28
    randreu28
    on Mar 23, 2026
    Author

    @chshouyu Yeah those are expected. Just noise, not related to the issue at hand. I've worked with tanstack start + cloudflare for a bit and I recognize them. They are thrown when any SSR error occurs.

    One is a simple warning for a missing default component. You can read more about here

    The other is a known bug that occurs exclusively on development builds, after hot reload and its related to Cloudflare and it's Vite plugin. You can read more about here and here.

    I've updated the repo I used for replicating this issue with a couple of fixes so that these unrelated errors do not disturb. If you still experience any errors related to the request context, consider not relying too much on the hot reload.

  14. chshouyu commented on Mar 23, 2026

    @chshouyu
    chshouyu
    on Mar 23, 2026

    @randreu28 Understood. Thank you very much.

  15. ebrahimelmwafy2-droid commented on Mar 24, 2026

    @ebrahimelmwafy2-droid
    ebrahimelmwafy2-droid
    on Mar 24, 2026

    Hi @harry-whorlow and @randreu28,
    I’ve reproduced this issue on my machine using the provided example. The error is quite clear: setStyleProperty and use are being imported from solid-js/web in an SSR/Worker environment (Cloudflare), but these functions are only exported in the client-side bundle of SolidJS, not in the dist/server.js.
    It seems like the Pacer and Form devtools components (specifically in Shell.js) are trying to access DOM-specific utilities during the Nitro server build.
    Proposed Fix:
    We should wrap these imports or the logic using them in a check to ensure they only run on the client side, or update the bundling process to handle solid-js/web exports correctly for SSR targets.

    Happy to help test any experimental branch!

  16. harry-whorlow commented on Mar 25, 2026

    @harry-whorlow
    harry-whorlow
    on Mar 25, 2026
    Collaborator

    I think this can be avoided if we use goober as opposed to just directly setting the style.

    I've opened a pr that might fix it npm i https://pkg.pr.new/@tanstack/react-form-devtools@f8c41a0 you can try it out if you like, I have to rush off unfortunately as I've got a conference to go to. ✈️

  17. ebrahimelmwafy2-droid commented on Mar 25, 2026

    @ebrahimelmwafy2-droid
    ebrahimelmwafy2-droid
    on Mar 25, 2026

    "Hi @harry-whorlow, I just ran the build using NX and pnpm. Everything built successfully for all 12 projects! The bundle sizes are within limits, and the import.meta warnings are expected for this target. I'm ready to test this in my Cloudflare environment now. Great job on the goober implementation!"

  18. VesperQuartz commented on Aug 10, 2026

    @VesperQuartz
    VesperQuartz
    on Aug 10, 2026

    I am also facing this issue with Tanstack start and cloudflare. I am also not using solid router

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions