Code block displaying [object Object] when @storybook/components is used

[okonet]

Describe the bug

When using @storybook/components (as per reproduction case) I see [object Object] instead of the code in the code block:

To Reproduce

https://github.com/okonet/storybook-reproduction-code-block

System

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.14.2 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.5.0 - /opt/homebrew/opt/node@16/bin/npm
  Browsers:
    Chrome: 101.0.4951.41
    Firefox: 97.0.1
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-essentials: 6.5.0-beta.0 => 6.5.0-beta.0 
    @storybook/client-logger: 6.5.0-beta.0 => 6.5.0-beta.0 
    @storybook/components: 6.5.0-beta.0 => 6.5.0-beta.0 
    @storybook/react: 6.5.0-beta.0 => 6.5.0-beta.0 
    @storybook/theming: 6.5.0-beta.0 => 6.5.0-beta.0 

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-beta.3 containing PR #18127 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

@okonet can you try the new release? seems to be working for me now

[SlexAxton]

I'm still getting this problem with 6.5.0-beta.4

This is me trying to get the react-ts example to work with no new code:

{
  "name": "",
  "private": true,
  "version": "0.0.1",
  "description": "foo",
  "license": "UNLICENSED",
  "type": "commonjs",
  "scripts": {
    "build-storybook": "STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook",
    "debug": "NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011",
    "storybook": "STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 --no-manager-cache"
  },
  "dependencies": {
    "formik": "^2.2.9",
    "preact": ">=10.5.13 <11.0.0",
    "prop-types": "15.7.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@babel/core": ">=7.13.0 <8.0.0",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-typescript": "^7.12.7",
    "@storybook/addon-a11y": "^6.4.22",
    "@storybook/addon-essentials": "6.5.0-beta.4",
    "@storybook/addon-storyshots": "6.5.0-beta.4",
    "@storybook/addon-storysource": "6.5.0-beta.4",
    "@storybook/addons": "6.5.0-beta.4",
    "@storybook/cli": "6.5.0-beta.4",
    "@storybook/components": "6.5.0-beta.4",
    "@storybook/mdx2-csf": "0.0.1-canary.1.838a6ca.0",
    "@storybook/react": "6.5.0-beta.4",
    "@storybook/theming": "6.5.0-beta.4",
    "@testing-library/dom": "^7.31.2",
    "@testing-library/react": "12.1.2",
    "@testing-library/user-event": "^13.1.9",
    "@types/babel__preset-env": "^7",
    "@types/react": "^16.14.23",
    "@types/react-dom": "^16.9.14",
    "jest": "^28.0.3",
    "lodash": "^4.17.21",
    "react-docgen-typescript": "^2.2.2",
    "require-from-string": "^2.0.2",
    "typescript": "^4.6.3",
    "webpack": "4"
  }
}

[shilman]

@SlexAxton is that in the monorepo or a standalone repo? And why is there a preact dependency?

[SlexAxton]

that’s taking the folder from the monorepo and making it into a standalone folder, and then installing peerDeps until its happy. preact is a peerDep for something now i guess :)

[okonet]

I can see it in the monorepo as well but it only after the fresh start:

cd examples/react-ts
yarn run storybook

After the page is refreshed it is showing the proper code:

I'm still investigating the cause...

[SlexAxton]

Ah i think its the same for me but it never updates in the docs tab.

On Wed, May 4, 2022 at 7:37 AM Andrey Okonetchnikov < ***@***.***> wrote: I can see it in the monorepo as well but it only after the fresh start: cd examples/react-ts yarn run storybook [image: CleanShot 2022-05-04 at 14 35 ***@***.*** <https://user-images.githubusercontent.com/11071/166682319-b6ef5375-68f4-4174-a019-0b622179f7ac.png> After the page is refreshed it is showing the proper code: [image: CleanShot 2022-05-04 at 14 36 ***@***.*** <https://user-images.githubusercontent.com/11071/166682393-242968ab-7c27-4df9-bcdb-0705016daf1e.png> I'm still investigating the cause... — Reply to this email directly, view it on GitHub <#18090 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAXSKUK5ED7W2ZOXC4LCLDVIJVP7ANCNFSM5UR5NZQQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Alex Sexton

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-beta.7 containing PR #18158 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

[okonet]

Looks like we could try undoing our "fix": wooorm/refractor#61

[bacium]

I have configured Button.stories.tsx, but it is displayed as [object, Object] in the show code, how to deal with this problem,

[guofei0723]

I have configured Button.stories.tsx, but it is displayed as [object, Object] in the show code, how to deal with this problem,

v7.0.20, same issue

The component of this story is a component of a third-party library, I just re-exported it

[Jared-Dahlke]

this is happening to me with ShadCN components on latest storybook 7.4. Most of the code blocks have Object OBject in them

[AngusMacrae]

The open issue relating to this is here
#20920