Bug: Uncaught ReferenceError: MessageChannel is not defined

[radosek]

React version: 19.0.0

Steps To Reproduce

1. Create an Astro & React project with server adapter for Cloudflare
2. Try to deploy to Cloudflare Pages via wrangler deploy

The current behavior

Uncaught ReferenceError: MessageChannel is not defined

The expected behavior

Should work in the same way as latest 18 version.

https://github.com/facebook/react/blob/6a4b46cd70d2672bc4be59dcb5b8dede22ed0cef/packages/react-server/src/ReactServerStreamConfigBrowser.js#L16C1-L28C2

[phase]

I made a repo with the steps to reproduce this: https://github.com/phase/test-astro-react19-cf-workers

[prolanzer]

Had to downgrade to 18.x.x to make the deploy working again.

[terao-ryohei]

I made a repo with the steps to reproduce this: https://github.com/phase/test-astro-react19-cf-workers

I have same problem in my ReactRouterV7 project.
I tried fix this, and build/deploy, Then I got work in my environment.
Please check it.

122|            'astro:build:setup': ({ vite, target }) => {
123|                if (target === 'server') {
124|                    vite.resolve ||= {};
125|                   vite.resolve.alias ||= {};
126|                    const aliases = [
127|                        {
128|                            find: 'react-dom/server',
129|                           -  replacement: 'react-dom/server.browser',
129|                           +  replacement: 'react-dom/server.edge',
130|                        },
131|                    ];

In ReactRouterv7, I can fix same. (fix entry.server.tsx)
That's why I think we can't use react-dom/server.browser on React_v19 or something.

[phase]

That config change worked withastro/adapters#436 (comment)

Here's my full astro.config.mjs:

// @ts-check
import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";

import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  output: "server",
  adapter: cloudflare(),
  integrations: [react()],
  vite: {
    resolve: {
      // Use react-dom/server.edge instead of react-dom/server.browser for React 19.
      // Without this, MessageChannel from node:worker_threads needs to be polyfilled.
      alias: import.meta.env.PROD && {
        "react-dom/server": "react-dom/server.edge",
      },
    },
  },
});

[totawe]

Tota

[radosek]

@phase so deploy works for you? How do you deploy your codebase as wrangler pages deploy still fails for me? Thanks

[CanRau]

fantastic, had to alias react-dom/server.browser to react-dom/server.edge in my case but it works for now 👌🏼

[phase]

@phase so deploy works for you? How do you deploy your codebase as wrangler pages deploy still fails for me? Thanks

I'm using workers, can you try deploying there? Or are you using features that require pages? Would love to see the error and your wrangler.toml.
That config & bunx astro build && bunx wrangler deploy worked for me in my test repo.

[radosek]

@phase Thanks. After clearing cache several times it seems to work 🤦‍♂️

[radosek]

I guess this should be fixed in @astrojs/cloudflare or in both cf/react integrations.