storybook: Addon-docs: Error: Evaluation failed: TypeError: Cannot convert a Symbol value to a string

As a workaround you can set the docs.source.type story parameter to "code".

It is not friendly for using template mode. The code will be displayed as

(args) => <Component {...args} />;

How to write stories if set type to code???

Here’s how, it doesn’t affect the story, only the “Docs” page/addon.

export const MyStory = Template.bind({});
MyStory.args = {
    key: "Property",
}
/* 👇🏻 here is the workaround */
  MyStory.parameters = {
    docs: {
      source: {
        code: "Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554"
      }
    }
  }

I am seeing this error using Storybook ~7.0.18~ 7.0.20 with Vite and React. Haven’t been able to pin down what exactly what is causing the problem. Using the docs workaround until this gets fixed.

@shilman Can we re-open this issue? I see the PR mentioned above is still open.

As a workaround you can set the docs.source.type story parameter to "code".

I am also seeing this issue in SB7 + React.

Issue persists in 7.0.0-beta.64

I am having the same problem as listed in #14020

Here’s my workaround so the ‘view code’ sample looks right:

import React, { Suspense } from 'react';
import { Story, Meta } from '@storybook/react';

import AppLazyLoadedTemp from './AppLazyLoaded';

const AppLazyLoaded = (props: any) => {
  return <Suspense fallback={<p>Please wait...</p>}><AppLazyLoadedTemp {...props} /></Suspense>;
}

export default {
  title: 'AppLazyLoaded',
  component: AppLazyLoaded,
  argTypes: {
  },
} as Meta;

const Template: Story<{}> = (args) => <AppLazyLoaded {...args} />;

export const Demo = Template.bind({});
Demo.args = {};

Hello, the PR #19785 has not been merged and this is still an issue. Using i18next in a global decorator is a common use case where the current issue occurs. Any plans to fix this?

I noticed this issue is happening only when there are arguments in a story. For example, this will throw the error Cannot convert a Symbol value to a string:

    render: (args) => {
        const iconName =  args.icon;
        const Icon = useMemo(() => lazy(() => import(`../../../foundation/Icons/tsx/${iconName}`).then((module) => ({ default: module[iconName] }))), [iconName]);

But without “args”, it work flawlessly:

    render: () => {
        const iconName =  "Homeline";
        const Icon = useMemo(() => lazy(() => import(`../../../foundation/Icons/tsx/${iconName}`).then((module) => ({ default: module[iconName] }))), [iconName]);

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.46 containing PR #19004 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.

This issue still exists using 7.0.0-alpha.48

decorators: [(Story) => <Suspense>{Story()}</Suspense>]

gives the error

Cannot convert a Symbol value to a string

@davidmenendez yes here is a babel plugin I added which works. You might have to adjust the replace functions with something that works better for your code:

const template = require('@babel/template')

/**
 * Adding this babel transformer supports the src code view with Suspense
 * Until this issue is resolved, we have to add the src code docs ourselves:
 * https://github.com/storybookjs/storybook/issues/11554
 * The approach is to grab the src code for the entire file, and then strip out unecessary things
 * like large file header helpers that storybook injects so we only show the essentials.
 */
module.exports = () => {
  return {
    visitor: {
      Program(path, state) {
        if (state.file.opts.filename.endsWith('.stories.tsx')) {
          const srcCode = path.hub.file.code
            .trim()
            .replace(
              /(.*((__(STORY|LOCATIONS_MAP)__)|(\/\/)|(\/\*)|(@storybook\/react)|(Template\.parameters =))|(Template\.storyName)).*/g,
              ''
            )
            .replace(/.*React\.Suspense.*\n/gm, '')
            .replace(/export default.*Meta/s, '')
            .replace(/\n\s*\n/g, '\n\n')

          path.node.body.push(
            template.default.ast(`
Template.parameters = {
    ...Template.parameters,
    docs: {
        source: {
            code: \`${srcCode}\`
        }
    }
};`)
          )
        }
      }
    }
  }
}

In your main.js file:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  babel: async config => {
    return {
      ...config,
      plugins: [
        ...config.plugins,
        path.resolve(__dirname, './babel-docs-plugin.js')
      ]
    }
  },

Here is a working lazy loaded component: