storybookjs/storybook

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

a-bugaj opened this issue · 5 comments

a-bugaj commented

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>
    },
};

Bug screen

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 commented

Same in 8.0.0-beta.4.

  • 👍7
oenu commented

Same issue with different traceback,
image

    "@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 commented

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:
image

bartstcv commented

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 commented

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