[Bug]: Cannot assign to read only property '$$typeof' of object '#<Object>' [Storybook 8.0.0-beta.3]

[a-bugaj]

Describe the bug

Hello, today I faced an issue while defining Stories that are meant to pass JSX to my component, rather than mere strings. Under these circumstances, Storybook generates an error Cannot assign to read only property '$$typeof' of object '#<Object>'. This problem persists regardless of how the prop specified in args is managed within the component. Although passing props as strings or numbers functions correctly, attempting to pass JSX does not succeed.

Full reproduction repo is here: https://github.com/a-bugaj/storybook-8-bug-reproduction

An example of a simple component:

interface LabelProps {
  label: ReactNode;
}

const Label:FC<LabelProps> = ({ label }) => {
  return (
    <div>
      {label}
    </div>
  );
};

Meta:

const meta = {
  title: 'Example/Label',
  component: Label,
  parameters: {
    layout: 'centered',
  },
} satisfies Meta<typeof Label>;

Working stories: ✅

export const LabelStory: Story = {
  name: "label (working component)",
  args: {
    label: 'Hi, this component fully works.',
  },
};

Non-working stories: ❌

export const LabelStory2: Story = {
  name: "label (non-working component)",
  args: {
    label: <span>Hi, this component causes storybook crash :(</span>,
  },
};

Also non-working stories: ❌

export const LabelStory3: Story = {
    name: "label (non-working component)",
    args: {
        label: 'Hi, this component should fully works...',
        randomUnhandledPropInComponent: <span>...but trying to pass JSX prop causes it to crash:/</span>
    },
};

To Reproduce

https://github.com/a-bugaj/storybook-8-bug-reproduction

System

Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm <----- active
  Browsers:
    Chrome: 121.0.6167.184
    Safari: 17.2.1
  npmPackages:
    @storybook/addon-essentials: ^8.0.0-beta.3 => 8.0.0-beta.3 
    @storybook/addon-interactions: ^8.0.0-beta.3 => 8.0.0-beta.3 
    @storybook/addon-links: ^8.0.0-beta.3 => 8.0.0-beta.3 
    @storybook/addon-onboarding: ^1.0.11 => 1.0.11 
    @storybook/blocks: ^8.0.0-beta.3 => 8.0.0-beta.3 
    @storybook/nextjs: ^8.0.0-beta.3 => 8.0.0-beta.3 
    @storybook/react: ^8.0.0-beta.3 => 8.0.0-beta.3 
    @storybook/test: ^8.0.0-beta.3 => 8.0.0-beta.3 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.0.0-beta.3 => 8.0.0-beta.3

Additional context

No response

[bartstcv]

Same in 8.0.0-beta.4.

[oenu]

Same issue with different traceback,

    "@storybook/addon-designs": "^7.0.9",
    "@storybook/addon-essentials": "^8.0.0-beta.4",
    "@storybook/addon-interactions": "^8.0.0-beta.4",
    "@storybook/addon-links": "^8.0.0-beta.4",
    "@storybook/addon-onboarding": "^1.0.11",
    "@storybook/blocks": "^8.0.0-beta.4",
    "@storybook/react": "^8.0.0-beta.4",
    "@storybook/react-vite": "^8.0.0-beta.4",
    "@storybook/test": "^8.0.0-beta.4",

[bentaly]

Also getting this issue:

TypeError: Cannot assign to read only property '$$typeof' of object '#<Object>'
    at traverseArgs (preview.js:208:1266)
    at traverseArgs (preview.js:208:1268)
    at wrapActionsInSpyFns (preview.js:208:1357)
    at runtime.js:100:7419
    at Array.reduce (<anonymous>)
    at preparePartialAnnotations (runtime.js:100:7360)
    at prepareStory (runtime.js:100:4106)
    at StoryStore.memoizerific [as prepareStoryWithCache] (runtime.js:1:4751)
    at StoryStore.storyFromCSFFile (runtime.js:106:9309)
    at CsfDocsRender.prepare (runtime.js:121:1031)

May be useful:

[bartstcv]

I downgraded to 7.6.17 keeping only @storybook/react-vite@8.0.0-beta.5. Works as expected with vite@5.1.4.

[ndelangen]

This is fixed by #26118 which was released in 8.0.0-beta.5