Support React 19 #10942

matthewp · 2024-05-03T13:52:34Z

Changes

Support React 19
Fixes React 19 Beta throws error when starting astro dev server #10940

Testing

https://stackblitz.com/edit/withastro-astro-yerxxk

Docs

N/A, bug fix

changeset-bot · 2024-05-03T13:52:38Z

🦋 Changeset detected

Latest commit: 5770ff8

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

matthewp · 2024-05-03T13:52:43Z

!preview react-19

github-actions · 2024-05-03T13:54:55Z

Snapshots have been released for the following packages:

@astrojs/react@experimental--react-19

Publish Log

🦋  warn ===============================IMPORTANT!===============================
🦋  warn Packages will be released under the experimental--react-19 tag
🦋  warn ----------------------------------------------------------------------
🦋  info npm info astro
🦋  info npm info @astrojs/prism
🦋  info npm info @astrojs/rss
🦋  info npm info create-astro
🦋  info npm info @astrojs/db
🦋  info npm info @astrojs/alpinejs
🦋  info npm info @astrojs/lit
🦋  info npm info @astrojs/markdoc
🦋  info npm info @astrojs/mdx
🦋  info npm info @astrojs/node
🦋  info npm info @astrojs/partytown
🦋  info npm info @astrojs/preact
🦋  info npm info @astrojs/react
🦋  info npm info @astrojs/sitemap
🦋  info npm info @astrojs/solid-js
🦋  info npm info @astrojs/svelte
🦋  info npm info @astrojs/tailwind
🦋  info npm info @astrojs/vercel
🦋  info npm info @astrojs/vue
🦋  info npm info @astrojs/internal-helpers
🦋  info npm info @astrojs/markdown-remark
🦋  info npm info @astrojs/telemetry
🦋  info npm info @astrojs/underscore-redirects
🦋  info npm info @astrojs/upgrade
🦋  warn astro is not being published because version 4.7.1 is already published on npm
🦋  warn @astrojs/prism is not being published because version 3.1.0 is already published on npm
🦋  warn @astrojs/rss is not being published because version 4.0.5 is already published on npm
🦋  warn create-astro is not being published because version 4.8.0 is already published on npm
🦋  warn @astrojs/db is not being published because version 0.10.7 is already published on npm
🦋  warn @astrojs/alpinejs is not being published because version 0.4.0 is already published on npm
🦋  warn @astrojs/lit is not being published because version 4.0.1 is already published on npm
🦋  warn @astrojs/markdoc is not being published because version 0.11.0 is already published on npm
🦋  warn @astrojs/mdx is not being published because version 2.3.1 is already published on npm
🦋  warn @astrojs/node is not being published because version 8.2.5 is already published on npm
🦋  warn @astrojs/partytown is not being published because version 2.1.0 is already published on npm
🦋  warn @astrojs/preact is not being published because version 3.2.0 is already published on npm
🦋  info @astrojs/react is being published because our local version (0.0.0-react-19-20240503135357) has not been published on npm
🦋  warn @astrojs/sitemap is not being published because version 3.1.4 is already published on npm
🦋  warn @astrojs/solid-js is not being published because version 4.1.0 is already published on npm
🦋  warn @astrojs/svelte is not being published because version 5.4.0 is already published on npm
🦋  warn @astrojs/tailwind is not being published because version 5.1.0 is already published on npm
🦋  warn @astrojs/vercel is not being published because version 7.5.4 is already published on npm
🦋  warn @astrojs/vue is not being published because version 4.1.0 is already published on npm
🦋  warn @astrojs/internal-helpers is not being published because version 0.4.0 is already published on npm
🦋  warn @astrojs/markdown-remark is not being published because version 5.1.0 is already published on npm
🦋  warn @astrojs/telemetry is not being published because version 3.1.0 is already published on npm
🦋  warn @astrojs/underscore-redirects is not being published because version 0.3.3 is already published on npm
🦋  warn @astrojs/upgrade is not being published because version 0.3.0 is already published on npm
🦋  info Publishing "@astrojs/react" at "0.0.0-react-19-20240503135357"
🦋  success packages published successfully:
🦋  @astrojs/react@0.0.0-react-19-20240503135357
🦋  Creating git tag...
🦋  New tag:  @astrojs/react@0.0.0-react-19-20240503135357

Build Log


> root@0.0.0 build /home/runner/work/astro/astro
> turbo run build --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*"

• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/db, @astrojs/internal-helpers, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/underscore-redirects, @astrojs/upgrade, @astrojs/vercel, @astrojs/vue, @benchmark/timer, astro, create-astro
• Running build in 27 packages
• Remote caching enabled
::group::@astrojs/telemetry:build
cache hit, suppressing logs 5170a25fc8496464
::endgroup::
::group::@astrojs/internal-helpers:build
cache hit, suppressing logs e1ebaee47a22d8ff
::endgroup::
::group::create-astro:build
cache hit, suppressing logs 98c65d1b5364a6b0
::endgroup::
::group::@astrojs/prism:build
cache hit, suppressing logs 964673014fc0348b
::endgroup::
::group::@astrojs/upgrade:build
cache hit, suppressing logs 17159cc414a5ec81
::endgroup::
::group::@astrojs/markdown-remark:build
cache hit, suppressing logs 0d39e0ca8075441b
::endgroup::
::group::astro:build
cache miss, executing ddfcdc245293b3e9

> astro@4.7.1 build /home/runner/work/astro/astro/packages/astro
> pnpm run prebuild && astro-scripts build "src/**/*.{ts,js}" && tsc && pnpm run postbuild


> astro@4.7.1 prebuild /home/runner/work/astro/astro/packages/astro
> astro-scripts prebuild --to-string "src/runtime/server/astro-island.ts" "src/runtime/client/{idle,load,media,only,visible}.ts"


> astro@4.7.1 postbuild /home/runner/work/astro/astro/packages/astro
> astro-scripts copy "src/**/*.astro" && astro-scripts copy "src/**/*.wasm"

::endgroup::
::group::@astrojs/alpinejs:build
cache miss, executing d04f9821056ff824

> @astrojs/alpinejs@0.4.0 build /home/runner/work/astro/astro/packages/integrations/alpinejs
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/lit:build
cache miss, executing 213d39b05419bbca

> @astrojs/lit@4.0.1 build /home/runner/work/astro/astro/packages/integrations/lit
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/underscore-redirects:build
cache miss, executing 9c4d02ab76c247ba

> @astrojs/underscore-redirects@0.3.3 build /home/runner/work/astro/astro/packages/underscore-redirects
> astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json

::endgroup::
::group::@astrojs/react:build
cache miss, executing 991722f15f37ed97

> @astrojs/react@0.0.0-react-19-20240503135357 build /home/runner/work/astro/astro/packages/integrations/react
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/node:build
cache miss, executing 4873d51676fb4580

> @astrojs/node@8.2.5 build /home/runner/work/astro/astro/packages/integrations/node
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/solid-js:build
cache miss, executing 02c13ea96093c9ce

> @astrojs/solid-js@4.1.0 build /home/runner/work/astro/astro/packages/integrations/solid
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/tailwind:build
cache miss, executing c83f9abb9a8f53a9

> @astrojs/tailwind@5.1.0 build /home/runner/work/astro/astro/packages/integrations/tailwind
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/vercel:build
cache miss, executing 3c96936d6b8c3280

> @astrojs/vercel@7.5.4 build /home/runner/work/astro/astro/packages/integrations/vercel
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/preact:build
cache miss, executing 3dc1bfa109d209a9

> @astrojs/preact@3.2.0 build /home/runner/work/astro/astro/packages/integrations/preact
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/svelte:build
cache miss, executing 0626d582be1baf2c

> @astrojs/svelte@5.4.0 build /home/runner/work/astro/astro/packages/integrations/svelte
> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc

::endgroup::
::group::@astrojs/partytown:build
cache miss, executing d8a19c1e0ac6f6e2

> @astrojs/partytown@2.1.0 build /home/runner/work/astro/astro/packages/integrations/partytown
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/mdx:build
cache miss, executing d7ab301c58bb3ebb

> @astrojs/mdx@2.3.1 build /home/runner/work/astro/astro/packages/integrations/mdx
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@benchmark/timer:build
cache miss, executing 1a24bfd2767f1b15

> @benchmark/timer@0.0.0 build /home/runner/work/astro/astro/benchmark/packages/timer
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/rss:build
cache miss, executing e292889e902315e9

> @astrojs/rss@4.0.5 build /home/runner/work/astro/astro/packages/astro-rss
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/markdoc:build
cache miss, executing 0c77ac913188b714

> @astrojs/markdoc@0.11.0 build /home/runner/work/astro/astro/packages/integrations/markdoc
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/sitemap:build
cache miss, executing cda11adb42935b57

> @astrojs/sitemap@3.1.4 build /home/runner/work/astro/astro/packages/integrations/sitemap
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::
::group::@astrojs/vue:build
cache miss, executing db6f8aacbf4a3846

> @astrojs/vue@4.1.0 build /home/runner/work/astro/astro/packages/integrations/vue
> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc

::endgroup::
::group::@astrojs/db:build
cache miss, executing 72a582f3740bf958

> @astrojs/db@0.10.7 build /home/runner/work/astro/astro/packages/db
> astro-scripts build "src/**/*.ts" && tsc && pnpm types:virtual


> @astrojs/db@0.10.7 types:virtual /home/runner/work/astro/astro/packages/db
> tsc -p ./tsconfig.virtual.json

::endgroup::

 Tasks:    25 successful, 25 total
Cached:    6 cached, 25 total
  Time:    45.709s

bholmesdev

Note on React 19 types. From my testing, I also found that we use a server rendering API that is no longer available in the base React 19 package: renderToReadableStream(). I needed to update this import from react-dom/server to react-dom/server.browser to access. Otherwise, React defaults to Node and only exposes rendertoPipeableStream() from this package. Can you confirm you see the same issue in a test React 19 project?

bholmesdev · 2024-05-03T14:23:13Z

packages/integrations/react/package.json

@@ -62,8 +62,8 @@
  "peerDependencies": {
    "@types/react": "^17.0.50 || ^18.0.21",


Should we add the @types/react preview package as well? They are listed as npm:types-react@beta and npm:types-react-dom@beta. Not sure if the npm: prefix works with peer deps though

I don't know how to semver this, is it:

"@types/react": "^17.0.50 || ^18.0.21 || npm:types-react@beta"

I admit this is outside of my wheelhouse

Yes, that looks correct. I tested locally to confirm whether npm will raise an exception resolving peer deps, and it unfortunately does. pnpm works fine since it only warns for mismatched peer deps. I think we need to add this for everything to install correctly.

matthewp · 2024-05-03T15:19:36Z

@bholmesdev The logic seems to fallback to renderToPipeableStreamAsync so I think it works fine, see:

astro/packages/integrations/react/server.js

Lines 109 to 113 in befbda7

    
           if ('renderToReadableStream' in ReactDOM) { 
        
           	html = await renderToReadableStreamAsync(vnode, renderOptions); 
        
           } else { 
        
           	html = await renderToPipeableStreamAsync(vnode, renderOptions); 
        
           }

.changeset/short-phones-breathe.md

matthewp · 2024-05-03T18:04:10Z

!preview react-19

github-actions · 2024-05-03T18:05:07Z

Snapshots have been released for the following packages:

@astrojs/react@experimental--react-19

Publish Log

🦋  warn ===============================IMPORTANT!===============================
🦋  warn Packages will be released under the experimental--react-19 tag
🦋  warn ----------------------------------------------------------------------
🦋  info npm info astro
🦋  info npm info @astrojs/prism
🦋  info npm info @astrojs/rss
🦋  info npm info create-astro
🦋  info npm info @astrojs/db
🦋  info npm info @astrojs/alpinejs
🦋  info npm info @astrojs/lit
🦋  info npm info @astrojs/markdoc
🦋  info npm info @astrojs/mdx
🦋  info npm info @astrojs/node
🦋  info npm info @astrojs/partytown
🦋  info npm info @astrojs/preact
🦋  info npm info @astrojs/react
🦋  info npm info @astrojs/sitemap
🦋  info npm info @astrojs/solid-js
🦋  info npm info @astrojs/svelte
🦋  info npm info @astrojs/tailwind
🦋  info npm info @astrojs/vercel
🦋  info npm info @astrojs/vue
🦋  info npm info @astrojs/internal-helpers
🦋  info npm info @astrojs/markdown-remark
🦋  info npm info @astrojs/telemetry
🦋  info npm info @astrojs/underscore-redirects
🦋  info npm info @astrojs/upgrade
🦋  warn astro is not being published because version 4.7.1 is already published on npm
🦋  warn @astrojs/prism is not being published because version 3.1.0 is already published on npm
🦋  warn @astrojs/rss is not being published because version 4.0.5 is already published on npm
🦋  warn create-astro is not being published because version 4.8.0 is already published on npm
🦋  warn @astrojs/db is not being published because version 0.10.7 is already published on npm
🦋  warn @astrojs/alpinejs is not being published because version 0.4.0 is already published on npm
🦋  warn @astrojs/lit is not being published because version 4.0.1 is already published on npm
🦋  warn @astrojs/markdoc is not being published because version 0.11.0 is already published on npm
🦋  warn @astrojs/mdx is not being published because version 2.3.1 is already published on npm
🦋  warn @astrojs/node is not being published because version 8.2.5 is already published on npm
🦋  warn @astrojs/partytown is not being published because version 2.1.0 is already published on npm
🦋  warn @astrojs/preact is not being published because version 3.2.0 is already published on npm
🦋  info @astrojs/react is being published because our local version (0.0.0-react-19-20240503180451) has not been published on npm
🦋  warn @astrojs/sitemap is not being published because version 3.1.4 is already published on npm
🦋  warn @astrojs/solid-js is not being published because version 4.1.0 is already published on npm
🦋  warn @astrojs/svelte is not being published because version 5.4.0 is already published on npm
🦋  warn @astrojs/tailwind is not being published because version 5.1.0 is already published on npm
🦋  warn @astrojs/vercel is not being published because version 7.5.4 is already published on npm
🦋  warn @astrojs/vue is not being published because version 4.1.0 is already published on npm
🦋  warn @astrojs/internal-helpers is not being published because version 0.4.0 is already published on npm
🦋  warn @astrojs/markdown-remark is not being published because version 5.1.0 is already published on npm
🦋  warn @astrojs/telemetry is not being published because version 3.1.0 is already published on npm
🦋  warn @astrojs/underscore-redirects is not being published because version 0.3.3 is already published on npm
🦋  warn @astrojs/upgrade is not being published because version 0.3.0 is already published on npm
🦋  info Publishing "@astrojs/react" at "0.0.0-react-19-20240503180451"
🦋  success packages published successfully:
🦋  @astrojs/react@0.0.0-react-19-20240503180451
🦋  Creating git tag...
🦋  New tag:  @astrojs/react@0.0.0-react-19-20240503180451

Build Log


> root@0.0.0 build /home/runner/work/astro/astro
> turbo run build --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*"

• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/db, @astrojs/internal-helpers, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/underscore-redirects, @astrojs/upgrade, @astrojs/vercel, @astrojs/vue, @benchmark/timer, astro, create-astro
• Running build in 27 packages
• Remote caching enabled
::group::create-astro:build
cache hit, suppressing logs 98c65d1b5364a6b0
::endgroup::
::group::@astrojs/internal-helpers:build
cache hit, suppressing logs e1ebaee47a22d8ff
::endgroup::
::group::@astrojs/prism:build
cache hit, suppressing logs 964673014fc0348b
::endgroup::
::group::@astrojs/markdown-remark:build
cache hit, suppressing logs 0d39e0ca8075441b
::endgroup::
::group::@astrojs/telemetry:build
cache hit, suppressing logs 5170a25fc8496464
::endgroup::
::group::@astrojs/upgrade:build
cache hit, suppressing logs 17159cc414a5ec81
::endgroup::
::group::astro:build
cache hit, suppressing logs ddfcdc245293b3e9
::endgroup::
::group::@astrojs/mdx:build
cache hit, suppressing logs d7ab301c58bb3ebb
::endgroup::
::group::@astrojs/vercel:build
cache hit, suppressing logs 3c96936d6b8c3280
::endgroup::
::group::@astrojs/alpinejs:build
cache hit, suppressing logs d04f9821056ff824
::endgroup::
::group::@astrojs/preact:build
cache hit, suppressing logs 3dc1bfa109d209a9
::endgroup::
::group::@astrojs/svelte:build
cache hit, suppressing logs 0626d582be1baf2c
::endgroup::
::group::@astrojs/underscore-redirects:build
cache hit, suppressing logs 9c4d02ab76c247ba
::endgroup::
::group::@astrojs/vue:build
cache hit, suppressing logs db6f8aacbf4a3846
::endgroup::
::group::@astrojs/partytown:build
cache hit, suppressing logs d8a19c1e0ac6f6e2
::endgroup::
::group::@astrojs/tailwind:build
cache hit, suppressing logs c83f9abb9a8f53a9
::endgroup::
::group::@astrojs/db:build
cache hit, suppressing logs 72a582f3740bf958
::endgroup::
::group::@astrojs/solid-js:build
cache hit, suppressing logs 02c13ea96093c9ce
::endgroup::
::group::@astrojs/lit:build
cache hit, suppressing logs 213d39b05419bbca
::endgroup::
::group::@astrojs/rss:build
cache hit, suppressing logs e292889e902315e9
::endgroup::
::group::@astrojs/markdoc:build
cache hit, suppressing logs 0c77ac913188b714
::endgroup::
::group::@benchmark/timer:build
cache hit, suppressing logs 1a24bfd2767f1b15
::endgroup::
::group::@astrojs/node:build
cache hit, suppressing logs 4873d51676fb4580
::endgroup::
::group::@astrojs/sitemap:build
cache hit, suppressing logs cda11adb42935b57
::endgroup::
::group::@astrojs/react:build
cache miss, executing a2dfddee7344b20b

> @astrojs/react@0.0.0-react-19-20240503180451 build /home/runner/work/astro/astro/packages/integrations/react
> astro-scripts build "src/**/*.ts" && tsc

::endgroup::

 Tasks:    25 successful, 25 total
Cached:    24 cached, 25 total
  Time:    4.261s

bholmesdev · 2024-05-03T19:23:29Z

@matthewp Ah okay, my guess is the react 17 conditional was triggering the wrong function. I see that was refactored here

ematipico · 2024-05-06T15:20:18Z

I added this to the 4.8 milestone @matthewp , I hope it's fine

bholmesdev

Pushed a fix for the @types peer dep. LGTM now

matthewp · 2024-05-06T16:56:56Z

Thanks @bholmesdev !

- doesn't work yet because of withastro/astro#10942

Support React 19

fd218d2

github-actions bot added pkg: react Related to React (scope) pkg: integration Related to any renderer integration (scope) labels May 3, 2024

bholmesdev reviewed May 3, 2024

View reviewed changes

Fix lint

45bbcfc

matthewp marked this pull request as ready for review May 3, 2024 16:16

matthewp commented May 3, 2024

View reviewed changes

.changeset/short-phones-breathe.md Outdated Show resolved Hide resolved

Update .changeset/short-phones-breathe.md

1a665f7

bluwy approved these changes May 6, 2024

View reviewed changes

ematipico approved these changes May 6, 2024

View reviewed changes

ematipico added this to the 4.8.0 milestone May 6, 2024

fix: update types peer dep

5770ff8

bholmesdev approved these changes May 6, 2024

View reviewed changes

ematipico removed this from the 4.8.0 milestone May 6, 2024

matthewp merged commit d47baa4 into main May 7, 2024
13 checks passed

matthewp deleted the react-19 branch May 7, 2024 17:13

astrobot-houston mentioned this pull request May 6, 2024

[ci] release #10944

Merged

JLarky added a commit to fogbender/b2b-saaskit that referenced this pull request May 19, 2024

install react 19

0e6cd75

- doesn't work yet because of withastro/astro#10942

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support React 19 #10942

Support React 19 #10942

matthewp commented May 3, 2024 •

edited

changeset-bot bot commented May 3, 2024 •

edited

matthewp commented May 3, 2024

github-actions bot commented May 3, 2024

bholmesdev left a comment •

edited

bholmesdev May 3, 2024

matthewp May 3, 2024

bholmesdev May 3, 2024 •

edited

matthewp commented May 3, 2024

matthewp commented May 3, 2024

github-actions bot commented May 3, 2024

bholmesdev commented May 3, 2024

ematipico commented May 6, 2024

bholmesdev left a comment

matthewp commented May 6, 2024

		@@ -62,8 +62,8 @@
		"peerDependencies": {
		"@types/react": "^17.0.50 \|\| ^18.0.21",

Support React 19 #10942

Support React 19 #10942

Conversation

matthewp commented May 3, 2024 • edited

Changes

Testing

Docs

changeset-bot bot commented May 3, 2024 • edited

🦋 Changeset detected

matthewp commented May 3, 2024

github-actions bot commented May 3, 2024

bholmesdev left a comment • edited

Choose a reason for hiding this comment

bholmesdev May 3, 2024

Choose a reason for hiding this comment

matthewp May 3, 2024

Choose a reason for hiding this comment

bholmesdev May 3, 2024 • edited

Choose a reason for hiding this comment

matthewp commented May 3, 2024

matthewp commented May 3, 2024

github-actions bot commented May 3, 2024

bholmesdev commented May 3, 2024

ematipico commented May 6, 2024

bholmesdev left a comment

Choose a reason for hiding this comment

matthewp commented May 6, 2024

matthewp commented May 3, 2024 •

edited

changeset-bot bot commented May 3, 2024 •

edited

bholmesdev left a comment •

edited

bholmesdev May 3, 2024 •

edited