unstable_middleware not working with the Cloudflare template

[alexanderson1993]

I'm using React Router as a...

framework

Reproduction

Clone https://github.com/alexanderson1993/cloudflare-middleware
Install dependencies
Run npm run dev
Open in a browser

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 91.67 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.6.0 - /opt/homebrew/bin/node
    Yarn: 4.5.3 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /opt/homebrew/bin/npm
    bun: 1.2.0 - ~/.bun/bin/bun
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 133.0.6943.142
    Safari: 18.1.1
  npmPackages:
    @react-router/dev: ^7.3.0 => 7.3.0 
    @react-router/node: ^7.3.0 => 7.3.0 
    @react-router/serve: ^7.3.0 => 7.3.0 
    react-router: ^7.3.0 => 7.3.0 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

It should display the default React Router template welcome page

Actual Behavior

It throws Error: No value found for context

Note: I have also tried this with the latest version of Vite and it still failed.

[Sh4yy]

I'm having a similar issue where I'm getting message: "Cannot read properties of undefined (reading 'unstable_middleware')",

[brophdawg11]

This looks like a a duplicate module issue - maybe from a CJS/ESM boundary or something? If I console.log in the adapter file I see it logged twice on dev startup so that module shows up twice in the module graph and thus when you try to read rom the context you have a new instance. We'll dig in a bit and see if we can figure out where this goes wrong...

More details - ./app/adapterContext is imported in vite.config.ts for use in cloudflareDevProxy.getLoadContext to set the adapter context, and then also in app/routes/home.tsx to read from the context in middleware.

[tobiasfoerg]

I think that relates to my reported bug. #13158

You should pass the context instead of the contextprovider to the requesthandler as second parameter.

The types do not match the implementation.

[brophdawg11]

#13158 is just a types issue - not a runtime issue. This issue is due to duplicate modules being loaded in the module graph based on how Vite and the Cloudflare plugin work.

[alexanderson1993]

Jacob just published this PR to my repro repo, which seems to fix the issue. alexanderson1993/cloudflare-middleware#1

[shmuli9]

@jacob-ebey please can document (or link to docs) about how to use the new cloudflare plugin/env api?
Currently my entire knowledge on the topic comes from your PR

[FinPlorer]

Same for vercel

Error: Unable to create initial unstable_RouterContextProvider instance. Please confirm you are returning an instance of Map<unstable_routerContext, unknown> from your getLoadContext function.
Error: TypeError: init is not iterable
at Object.requestHandler [as handlerWeb] (/var/task/node_modules/react-router/dist/development/index.j

[nothumbee]

Same for vercel

Error: Unable to create initial unstable_RouterContextProvider instance. Please confirm you are returning an instance of Map<unstable_routerContext, unknown> from your getLoadContext function.
Error: TypeError: init is not iterable
at Object.requestHandler [as handlerWeb] (/var/task/node_modules/react-router/dist/development/index.j

Same here. Just spent hours trying to figure out what is wrong...

[nothumbee]

By any chance, do we have any workaround for this? I cannot host my app because of this..

[brophdawg11]

Closing this out because the original issue is solved by using the Vite environment API to get the getLoadContext into the same module graph and the route modules - alexanderson1993/cloudflare-middleware#1.

If others are running into problems, please open a fresh issue with a minimal reproduction.