[Bug] Story source not working

[shannonhochkins]

What version of vite are you using?

4.3.9

System info and storybook versions

System: OS: macOS 10.15.7 CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz Binaries: Node: 18.11.0 - ~/.nvm/versions/node/v18.11.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.11.0/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v18.11.0/bin/npm Browsers: Chrome: 114.0.5735.198 Safari: 15.6.1 npmPackages: @storybook/addon-controls: ^7.0.24 => 7.0.24 @storybook/addon-docs: ^7.0.24 => 7.0.24 @storybook/addon-essentials: ^7.0.23 => 7.0.24 @storybook/addon-interactions: ^7.0.23 => 7.0.24 @storybook/addon-links: ^7.0.23 => 7.0.24 @storybook/blocks: ^7.0.23 => 7.0.24 @storybook/builder-vite: ^7.0.23 => 7.0.24 @storybook/react: ^7.0.23 => 7.0.24 @storybook/react-vite: ^7.0.23 => 7.0.24 @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Describe the Bug

I believe there's an issue with the latest versions and retrieving the source code for a story, all i see is "No source code available" when using the "Primary" component or "Oh no, no source available" when using the Source component.

import type { StorybookConfig } from "@storybook/react-vite"; import path from 'path'; import tsconfigPaths from 'vite-tsconfig-paths';

// main.ts
export default {
  stories: [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-controls",
    "@storybook/addon-docs",
  ],
  core: {
    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
  },
  staticDirs: ['../static'],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: true
  },
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config) {
    if (!config.plugins) config.plugins = [];
    config.plugins.push(
      /** @see https://github.com/aleclarson/vite-tsconfig-paths */
      tsconfigPaths({
        projects: [path.resolve(path.dirname(__dirname), "tsconfig.json")],
      })
    );

    return config;
  },
} satisfies StorybookConfig;

Maybe I'm doing something wrong, but here's my simple stories.tsx file

function ExampleTemplate() {
  return <HassConnect hassUrl="fake">
    <ThemeProvider />
    <Group title="Examples">
      <ButtonCard domain="light" service="toggle" entity="light.fake_light" />
      <ButtonCard domain="switch" service="toggle" entity="switch.fake_gaming_switch" />
      <ButtonCard domain="mediaPlayer" service="toggle" entity="media_player.fake_tv" />
    </Group>
  </HassConnect>;
}

export const Example = ExampleTemplate.bind({});

function Template(args: Args) {
  return (
    <div>
        <h2>ButtonCard</h2>
        <p>This component is designed to make it very easy to use and control a device, the code below is all you need to control your device.</p>
        <p>This will automatically extract the friendly name, icon, state and group of the entity to render the ButtonCard below</p>
        <ExampleTemplate />
    </div>
  );
}

export default {
  title: "COMPONENTS/Buttons/ButtonCard",
  component: Template,
  parameters: {
    layout: "centered",
    width: "100%",
    docs: {
      description: {
          component:
              '`<ButtonCard />`'
      },
      page: () => (<>
        <Title />
        <Description />
        <h2>Example</h2>
        <Primary />
        <h2>Source code</h2>
        <Source />
        <h2>Component Props</h2>
        <ArgsTable of={ButtonCard} />
      </>),
      source: {
        type: 'code'
      }
  }
  },
  args: {

  },
  argTypes: {

  }
} satisfies Meta<typeof Template>;
export type Story = StoryObj<typeof ButtonCard>;
export const Playground = Template.bind({});

From what i've read, others are having issues with vite retrieving the story source

Link to Minimal Reproducible Example

No response

Participation

• [ ] I am willing to submit a pull request for this issue.