storybook-vite-source-loader-plugin + CSF3

I found an issue that works fine in Storybook 6.4.0-rc.6 + Webpack but fails with storybook-builder-vite.

The underlying issue is at https://github.com/eirslett/storybook-builder-vite/blob/c2e9c3cc9c7879047e793a2c441a1cdd39f576e2/packages/storybook-builder-vite/source-loader-plugin.js#L10

The inject function from @storybook/source-loader does not export a sourceJson property. I don’t think it ever did. But regardless, things still generally works.

However, if I upgrade the storybook dependencies (see #161) and create a Storybook 6.4 Component Story Format 3.0 (CSF3) test, storybook-builder-vite does not properly transform the story file and ends up causing Storybook to crash with a defaultExport is undefined message.

The following is a valid CSF3 story:

export default {
  title: 'Gizmo',
  render: ({ label, ...props }) => <button {...props}>{label}</button>
};

export const Default = {
  args: {
    label: 'Hello, World'
  }
};

The key thing to note is that there is no function export (StoryFn), just a CSF3 StoryObj export. When transformed by storybook-vite-source-loader-plugin the resulting JS file is:

var __STORY__ = void 0;
var __LOCATIONS_MAP__ = {};
;
export const __namedExportsOrder = [];

I believe this has to do with the plugin bypassing the “standard” Storybook transformer and trying to do its own thing.

Oddly enough, if you add a standard function export (StoryFn), things actually work, including the CSF3 (StoryObj) export.

...
export const Weird = () => <div>Don't know why this "fixes" it.</div>;

[scott-lc]

@joshwooding - That is a much better solution and works perfectly for me.

I was under the impression that the transform could not be async, which was why that other solution existed in the first place.

[IanVS]

Great teamwork! @joshwooding I’ll review a PR if you would like to submit it.