#TypeError: Cannot convert symbol to string

1 messages · Page 1 of 1 (latest)

jade birch
#

I'm getting this strange error that only appears with the built storybook..

TypeError: can't convert symbol to string
    qmt http://localhost:6006/assets/iframe-5d6b2f23.js:86
    Z$ http://localhost:6006/assets/iframe-5d6b2f23.js:90
    D8t http://localhost:6006/assets/iframe-5d6b2f23.js:90
    Y4 http://localhost:6006/assets/iframe-5d6b2f23.js:90
    R9t http://localhost:6006/assets/iframe-5d6b2f23.js:91
    N6 http://localhost:6006/assets/iframe-5d6b2f23.js:9
    dL http://localhost:6006/assets/iframe-5d6b2f23.js:9
    N6 http://localhost:6006/assets/iframe-5d6b2f23.js:9
    R9t http://localhost:6006/assets/iframe-5d6b2f23.js:91
    iht http://localhost:6006/assets/iframe-5d6b2f23.js:92
    hookified http://localhost:6006/sb-preview/runtime.mjs:7
    decorateStory http://localhost:6006/sb-preview/runtime.mjs:34
    bindWithContext http://localhost:6006/sb-preview/runtime.mjs:34
    wrapper http://localhost:6006/assets/iframe-5d6b2f23.js:92
    decorator http://localhost:6006/sb-preview/runtime.mjs:104
    makeDecorator http://localhost:6006/sb-preview/runtime.mjs:104
    hookified http://localhost:6006/sb-preview/runtime.mjs:7
    decorateStory http://localhost:6006/sb-preview/runtime.mjs:34
    bindWithContext http://localhost:6006/sb-preview/runtime.mjs:34
    YHt http://localhost:6006/assets/iframe-5d6b2f23.js:111
    hookified http://localhost:6006/sb-preview/runtime.mjs:7
    decorateStory http://localhost:6006/sb-preview/runtime.mjs:34
    bindWithContext http://localhost:6006/sb-preview/runtime.mjs:34
    WHt http://localhost:6006/assets/iframe-5d6b2f23.js:101
    hookified http://localhost:6006/sb-preview/runtime.mjs:7
    decorateStory http://localhost:6006/sb-preview/runtime.mjs:34
    bindWithContext http://localhost:6006/sb-preview/runtime.mjs:34
    SUt http://localhost:6006/assets/iframe-5d6b2f23.js:111
    hookified http://localhost:6006/sb-preview/runtime.mjs:7
    decorateStory http://localhost:6006/sb-preview/runtime.mjs:34
    bindWithContext http://localhost:6006/sb-preview/runtime.mjs:34
    IUt http://localhost:6006/assets/iframe-5d6b2f23.js:506
    hookified http://localhost:6006/sb-preview/runtime.mjs:7
    decorateStory http://localhost:6006/sb-preview/runtime.mjs:34
    bindWithContext http://localhost:6006/sb-preview/runtime.mjs:34
    Pee http://localhost:6006/assets/iframe-5d6b2f23.js:30
    rft http://localhost:6006/assets/iframe-5d6b2f23.js:32
    eft http://localhost:6006/assets/iframe-5d6b2f23.js:32
    k4t http://localhost:6006/assets/iframe-5d6b2f23.js:32
    FF http://localhost:6006/assets/iframe-5d6b2f23.js:32
    QZ http://localhost:6006/assets/iframe-5d6b2f23.js:32
    Qpt http://localhost:6006/assets/iframe-5d6b2f23.js:32
    E http://localhost:6006/assets/iframe-5d6b2f23.js:17
    $ http://localhost:6006/assets/iframe-5d6b2f23.js:17
runtime.mjs:4:93755

With

import { expect } from '@storybook/jest';
import type { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
import { mockFeatureFlags } from '@test-setup/api-mocks';
import { makeApiMocks, suspenseDecorator } from '@test-setup/decorators';
import { HostForm } from './HostForm';

const meta = {
  title: 'hosts/<HostForm>',
  component: HostForm,
  args: {
    onSuccess: () => {},
  },
  decorators: [suspenseDecorator],
} satisfies Meta<typeof HostForm>;
export default meta;

type Story = StoryObj<typeof meta>;

export const Add: Story = {
  play: async ({ canvasElement }) => {
    const { getByLabelText } = within(canvasElement);
    await expect(getByLabelText('IP Address')).toHaveAccessibleDescription(
      'Specify IP address or leave blank for auto-assignment.'
    );
  },
  decorators: [
    makeApiMocks((server) => {
      mockFeatureFlags(server, { TAG_HOSTS: true });
      server.create('network');
      server.createList('role', 5);
    }),
  ],
  parameters: {
    chromatic: {
      disable: false,
      viewports: [400, 500],
    },
  },
};
little shore
#

Can you try setting storyStoreV7: false to see if it goes away?

https://storybook.js.org/docs/react/api/main-config-features#storystorev7

If it does, then something about your story setup (I suspect your makeApiMocks decorator factory) is breaking Storybook's static analysis.

features

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

jade birch