[Bug] Package path . is not exported from package @storybook/addon-svelte-csf

[michael-wynne]

Describe the bug

I'm getting the following error in an existing Svelte project after initing sb. I followed the steps in this article.
Module not found: Error: Package path . is not exported from package node_modules/@storybook/addon-svelte-csf (see exports field in node_modules/@storybook/addon-svelte-csf/package.json)

Here's my .storybook/main.ts:

import type { StorybookConfig } from '@storybook/svelte-webpack5'

const config: StorybookConfig = {
  webpackFinal: async (config) => {
    const svelteLoader = config!.module!.rules!.find(
      (r) => (r as any).loader && (r as any).loader.includes('svelte-loader')
    )
    // @ts-ignore
    svelteLoader.options.preprocess = require('svelte-preprocess')({})
    return config
  },
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-svelte-csf',
  ],
  framework: {
    name: '@storybook/svelte-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

My svelte story file copied verbatim from the article:

<script>
  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
  import Button from './Button.svelte';
</script>

<Meta title="Button" component={Button}/>

<Template let:args>
  <Button {...args}/>
</Template>

<Story name="Primary" args={{primary: true}}/>

<Story name="Secondary" args={{primary: false}}/>

Steps to reproduce the behavior

1. Take existing Svelte project that uses Webpack 5 (not using SvelteKit) and run npx sb init
2. Install @storybook/addon-svelte-csf and wire it up in main.ts
3. Add svelte story file
4. Run npm run storybook

Expected behavior

The sb init generated some stories that look like this one:

import type { Meta, StoryObj } from '@storybook/svelte';
import Header from './Header.svelte';

const meta = {
  title: 'Example/Header',
  component: Header,
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
  tags: ['autodocs'],
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/svelte/configure/story-layout
    layout: 'fullscreen',
  },
} satisfies Meta<Header>;

export default meta;
type Story = StoryObj<typeof meta>;

export const LoggedIn: Story = {
  args: {
    user: {
      name: 'Jane Doe',
    },
  },
};

export const LoggedOut: Story = {};

Those work just fine for me. However, when I try to add a Svelte-native story, I get the error shown above and below.

Screenshots and/or logs

ModuleNotFoundError: Module not found: Error: Package path . is not exported from package /node_modules/@storybook/addon-svelte-csf (see exports field in /node_modules/@storybook/addon-svelte-csf/package.json)

Environment

• OS: Mac OS Ventura 13.5
• Node.js version: 18.17.1
• NPM version: 9.6.7

[JReinhold]

Could you create a reproduction repo that exhibits this behavior? The reproduction step "Take existing Svelte project that uses Webpack 5" is not straight forward.

[michael-wynne]

Hi @JReinhold! Yes, sorry about that. I'm hoping this repo will do the trick.

I followed this article to make as simple of an app as possible that uses both Svelte and Webpack. Then I installed @storybook/addon-svelte-csf and added it to the list of addons in main.js. Now I get the same error as my other repo when I try to run npm run storybook.

[JReinhold]

Thanks! If I remove the addon from the main configuration and remove the .stories.svelte file, it still breaks with other errors:

22% building import loader ./node_modules/.pnpm/svelte-loader@3.1.9_svelte@4.2.0/node_modules/svelte-loader/index.js

WARNING: You should add "svelte" to the "resolve.conditionNames" array in your webpack config. See https://github.com/sveltejs/svelte-loader#resolveconditionnames for more information

99% end closing watch compilationWARN Force closed preview build

ModuleNotFoundError: Module not found: Error: Can't resolve './assets/github.svg' in '/Users/jeppe/dev/temp/storybook-svelte-webpack/src/stories'

Are you sure that Webpack configuration is valid for a Svelte/Storybook setup?

It would be great if we could isolate it so it only fails and warns because of the addon.

[michael-wynne]

Ah that was silly of me to include the assets in my .gitignore, sorry about that! I've pushed an update, so you shouldn't get the error about the missing svg anymore.

I've also added the Webpack setting according to the warning you included, so you'll no longer see the warning, however it does not fix the Package path . is not exported from package @storybook/addon-svelte-csf error.

Repo here.

[benmccann]

You need to set the conditionNames and mainFields as specified in https://github.com/sveltejs/svelte-loader

[michael-wynne]

Hi @benmccann, thanks for the response! I have added those fields to my webpack config here. However the Package path . is not exported from package @storybook/addon-svelte-csf error persists.