Closed michael-wynne closed 1 year ago
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.
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
.
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.
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.
You need to set the conditionNames
and mainFields
as specified in https://github.com/sveltejs/svelte-loader
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.
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
:My svelte story file copied verbatim from the article:
Steps to reproduce the behavior
npx sb init
@storybook/addon-svelte-csf
and wire it up inmain.ts
npm run storybook
Expected behavior
The
sb init
generated some stories that look like this one: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