storybook icon indicating copy to clipboard operation
storybook copied to clipboard

[Bug]: `Cannot convert object to primitive value` when passing Modules in args

Open JReinhold opened this issue 2 years ago • 2 comments

Describe the bug

When passing a Module to an arg in a CSF story like this:

import { Description } from './Description';
import * as DefaultButtonStories from '../examples/Button.stories'; // 👈

const meta = {
  component: Description,
};
export default meta;

export const OfMetaAsComponentComment = {
  args: {
    of: DefaultButtonStories,  // 👈
  }
};

The story crashes with Cannot convert object to primitive value:

Cannot convert object to primitive value
TypeError: Cannot convert object to primitive value
    at http://localhost:6006/sb-preview/runtime.mjs:8814:34
    at Array.reduce (<anonymous>)
    at undecoratedStoryFn (http://localhost:6006/sb-preview/runtime.mjs:8812:53)
    at http://localhost:6006/sb-preview/runtime.mjs:6111:21
    at http://localhost:6006/sb-preview/runtime.mjs:8704:12
    at jsxDecorator (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_react_preview.js?v=ce6491e8:1862:17)
    at http://localhost:6006/sb-preview/runtime.mjs:6111:21
    at http://localhost:6006/sb-preview/runtime.mjs:8679:23
    at http://localhost:6006/sb-preview/runtime.mjs:8704:12
    at wrapper (http://localhost:6006/node_modules/.cache/.vite-storybook/deps/@storybook_addon-links_preview.js?v=ce6491e8:106:12)

An error that is thrown from here: https://github.com/storybookjs/storybook/blob/7584d9630a55825e5b747291bb506f38ed45d402/code/renderers/react/src/docs/jsxDecorator.tsx#L111-L112

To Reproduce

  1. git checkout block-description-improvements
  2. cd code
  3. yarn storybook:ui
  4. Comment out the workaround at https://github.com/storybookjs/storybook/blob/7584d9630a55825e5b747291bb506f38ed45d402/code/ui/blocks/src/blocks/Description.stories.tsx#L17
  5. Navigate to http://localhost:6006/?path=/story/storybook-blocks-blocks-description--of-meta-as-meta-comment

The source for the stories can be seen here: https://github.com/storybookjs/storybook/blob/7584d9630a55825e5b747291bb506f38ed45d402/code/ui/blocks/src/blocks/Description.stories.tsx

Additional context

This is not a problem if the arg is defined in the meta, only in the story.

JReinhold avatar Jan 05 '23 12:01 JReinhold

Hi @JReinhold , the links you have provided are not working. The specified branch is deleted. Can you please update the issue description and link to the source files you mentioned.

AnandChandrakar avatar Jan 25 '24 04:01 AnandChandrakar

Thanks @AnandChandrakar . Updated

JReinhold avatar Jan 29 '24 08:01 JReinhold