Trying to upgrade and getting errors #766

hipstersmoothie · 2024-07-01T00:05:34Z

I'm trying to upgrade to the latest beta and I get this error when starting my app

TypeError: Cannot assign to read only property 'page' of object '#<Object>'
    at /Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2334:23
    at wakeChunk (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1992:5)
    at initializeModelChunk (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2186:9)
    at resolveModelChunk (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2129:5)
    at resolveModel (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2716:5)
    at processFullRow (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:3338:9)
    at processBinaryChunk (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:3471:7)
    at progress (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:3558:5)
Cannot process SSR TypeError: Cannot assign to read only property 'page' of object '#<Object>'
    at /Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2334:23
    at wakeChunk (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1992:5)
    at initializeModelChunk (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2186:9)
    at resolveModelChunk (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2129:5)
    at resolveModel (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:2716:5)
    at processFullRow (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:3338:9)
    at processBinaryChunk (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:3471:7)
    at progress (/Users/andrewlisowski/Documents/fwoosh-3/node_modules/.pnpm/react-server-dom-webpack@19.0.0-rc.0_react-dom@19.0.0-rc.0_react@19.0.0-rc.0__react@19.0.0-rc_p6bqj3dy2a2jctw2w7d4lhay7m/node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:3558:5)

Should I report this upstream? This all works on the non-beta version

My repo is here. The upgrade work is on the upgrade-waku branch.

Set up steps:

pnpm I
pnpm turbo run build
cd examples/react
pnpm fwoosh dev

Navigate to localhost:3000/bench

The text was updated successfully, but these errors were encountered:

dai-shi · 2024-07-01T00:52:00Z

The build step pnpm turbo run build failed for me (a different pnpm version?), but I found you have two react-server-dom-webpack packages.

   "react-server-dom-webpack": "19.0.0-beta-e7d213dfb0-20240507",
   "react-server-dom-webpack": "19.0.0-rc.0",

Can you make sure to use rc.0 for everything?

I'm not sure if it relates to the error though. The monorepo setup seems tough.

hipstersmoothie · 2024-07-01T02:07:37Z

I think the real problem is the errors can be really hard to tie to something that caused the error

I fixed up those errors and still get the same runtime error

in Markdown.tsx I changed this line tableCell: TableCell, to tableCell: "td", and the render works.

So it seems like in this case it's having trouble rendering the client component

hipstersmoothie · 2024-07-01T02:46:07Z

In all cases the bug is complaining about a prop. In the case of the table cell it doesn't like node

hipstersmoothie · 2024-07-01T02:49:30Z

Okay that prop was getting passed to the dom, and that seems to break something

If I omit the prop the app renders fine

dai-shi · 2024-07-01T02:59:25Z

So it seems like in this case it's having trouble rendering the client component

interesting as recent changes are basically for the server.
yeah, it's pretty hard to debug.

hipstersmoothie · 2024-07-01T03:19:54Z

All errors seem to be when passing objects to client components

just commenting as I see things in case any future dev hits this, this is probably a problem upstream.

I have been getting into situations where I get not found and no output at all though. refreshing once or twice fixes it

dai-shi · 2024-07-01T03:36:07Z

All errors seem to be when passing objects to client components

from server components? So, is it easy to create a very small reproduction?

dai-shi · 2024-07-01T03:37:10Z

this is probably a problem upstream.

oh, okay.

I have been getting into situations where I get not found and no output at all though. refreshing once or twice fixes it

Yeah, i've also seen it before. Not sure how it causes it yet.

hipstersmoothie · 2024-07-01T03:38:48Z

from server components? So, is it easy to create a very small reproduction?

yeah

I can try to pare it down

hipstersmoothie · 2024-07-01T05:59:04Z

Okay got it down to just 1 file. hopefully I didn't miss any setup steps

Here is the repo

Setup should be

pnpm I
cd packages/fwoosh
pnpm waku dev

Then navigate to http://localhost:3000/iframe/test

When I remove the context it seems to work (but I want the context 😅 )

dai-shi · 2024-07-01T06:06:04Z

I was hoping to run it on StackBlitz:
https://stackblitz.com/github/hipstersmoothie/waku-repro/tree/main/packages/fwoosh

But, it can't install deps in the subfolder. 😅

dai-shi · 2024-07-01T06:14:58Z

Hm, I can reproduce the error locally.

When I remove the context it seems to work (but I want the context 😅 )

But, it sounds like we could make a smaller repro, even without monorepo.

We have an e2e test with e2e/fixtures/ssr-context-provider. I wonder how it's different.

hipstersmoothie · 2024-07-01T06:16:04Z

i've simplified it further too

I'll remove all the monorepo stuff if that helps

hipstersmoothie · 2024-07-01T06:20:29Z

monorepo stuff removed

hipstersmoothie · 2024-07-01T06:26:05Z

Okay simplified it as much as I think I can. It seems to have to do with the re-use of page and story. If I move the empty object to the args it works.

hipstersmoothie · 2024-07-01T06:26:41Z

doing this also works

dai-shi · 2024-07-01T06:30:52Z

Okay simplified it as much as I think I can.

This is great!!! But, I wish more if it can fit in e2e fixture.
src/pages/_layout.tsx isn't necessary.
I think it can be just one page src/pages/index.tsx.
I wonder if src/Button.stories.tsx is required for the reproduction.
Do we need both Decorator.tsx files?

dai-shi · 2024-07-01T06:33:06Z

Hmm, one decorator is a server component and the other is a client component.

hipstersmoothie · 2024-07-01T06:33:38Z

Yeah the decorators are needed and the way I compose them is too

dai-shi · 2024-07-01T06:37:11Z

I think it can be as simple as:

<PageContextProvider value={page}>
  <ClientHolder page={page}>
    <ServerHolder page={page}>
      <ClientButton />
    </ServerHolder>
  </ClientHolder>
</PageContextProvider>

Or something like that. (Well "simple" might be subjective)

hipstersmoothie · 2024-07-01T06:38:34Z

i'm finding I can only repro if the loop is there

dai-shi · 2024-07-01T06:38:59Z

So, it looks like when we pass page object to a client component, the page object got frozen (?) and the error occurs.

dai-shi · 2024-07-01T06:39:13Z

i'm finding I can only repro if the loop is there

Oh, really. That's interesting.

hipstersmoothie · 2024-07-01T06:40:19Z

I was wrong. what's important is the order of the decorators

CenteredDecorator > A11yDecorator (doesn't work)
A11yDecorator > CenteredDecorator (works)

hipstersmoothie · 2024-07-01T06:40:34Z

example is just this now

import { StoryContextProvider } from "../../components/Context";
import A11yDecorator from "../../A11yDecorator";
import CenteredDecorator from "../../CenteredDecorator";

export default function Iframe() {
  const page = {};

  return (
    <StoryContextProvider value={{ page }}>
      <CenteredDecorator page={page}>
        <A11yDecorator page={page}>
          foo
        </A11yDecorator>
      </CenteredDecorator>
    </StoryContextProvider>
  );
}

dai-shi · 2024-07-01T06:57:41Z

Nice! We could further reduce files and lines, but it's pretty understandable now. Thanks.

So, I did this change:

diff --git a/package.json b/package.json
index 8ad6a33..763059d 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "19.0.0-rc.0",
-    "react-dom": "19.0.0-rc.0",
-    "react-server-dom-webpack": "19.0.0-rc.0",
+    "react": "19.0.0-beta-e7d213dfb0-20240507",
+    "react-dom": "19.0.0-beta-e7d213dfb0-20240507",
+    "react-server-dom-webpack": "19.0.0-beta-e7d213dfb0-20240507",
     "waku": "^0.21.0-beta.0"
   },
   "devDependencies": {

And, it works. So, it looks like an upstream issue. You want to find the exact PR in React repo that causes this error and see if it's intentional.

I was hoping to use `-rc.0` for a while, but it has a bug and `-rc.<num>` has not been maintained. Let's use nightly rc version. close dai-shi#766

hipstersmoothie mentioned this issue Jul 1, 2024

[React 19] Cannot assign to readonly property facebook/react#30172

Closed

dai-shi mentioned this issue Jul 5, 2024

update react rc #781

Merged

dai-shi closed this as completed in 999ec21 Jul 5, 2024

dai-shi closed this as completed in #781 Jul 5, 2024

himself65 pushed a commit to himself65/waku that referenced this issue Jul 10, 2024

update react rc (dai-shi#781)

ddb4980

I was hoping to use `-rc.0` for a while, but it has a bug and `-rc.<num>` has not been maintained. Let's use nightly rc version. close dai-shi#766

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trying to upgrade and getting errors #766

Trying to upgrade and getting errors #766

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 •

edited

Loading

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 •

edited

Loading

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 •

edited

Loading

dai-shi commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 •

edited

Loading

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 •

edited

Loading

dai-shi commented Jul 1, 2024

Trying to upgrade and getting errors #766

Trying to upgrade and getting errors #766

Comments

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 • edited Loading

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 • edited Loading

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 • edited Loading

dai-shi commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 • edited Loading

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

dai-shi commented Jul 1, 2024

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 • edited Loading

dai-shi commented Jul 1, 2024

hipstersmoothie commented Jul 1, 2024 •

edited

Loading

hipstersmoothie commented Jul 1, 2024 •

edited

Loading

hipstersmoothie commented Jul 1, 2024 •

edited

Loading

hipstersmoothie commented Jul 1, 2024 •

edited

Loading

hipstersmoothie commented Jul 1, 2024 •

edited

Loading