404 - Storybook cannot find components

Description Dev server works with the exact same config but Storybook seems to struggle.

Strange log as I don’t use JSX or TSX

Plugin: vite:import-analysis
16:13:41 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis

and the browser console logs 404

GET http://localhost:6006/src/stories/BasicHeader.vue?vue&type=div&index=0&lang.div net::ERR_ABORTED 404 (Not Found)

To Reproduce Please create a reproduction by running yarn && yarn storybook Repo can be found at https://github.com/Miguel-Bento-Github/vite-vue-ts-storybook

Environment Info:

  System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.9.1 - /usr/local/bin/node
    Yarn: 1.22.15 - /opt/homebrew/bin/yarn
    npm: 7.21.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Firefox: 94.0.2
    Safari: 15.1
  npmPackages:
    @storybook/addon-a11y: ^6.4.3 => 6.4.3 
    @storybook/addon-actions: ^6.4.3 => 6.4.3 
    @storybook/addon-essentials: ^6.4.3 => 6.4.3 
    @storybook/addon-links: ^6.4.3 => 6.4.3 
    @storybook/vue3: ^6.4.3 => 6.4.3 

Help is appreciated in advance.

[IanVS]

It does look like that’s what you’re hitting. I don’t think another issue would help, since there’s already a PR open. It’s probably best to give it a little time, or try to find a workaround to remove the types or ignore the errors for now until it is fixed.

[IanVS]

It looks like your viteFinal is not quite right. You can remove the vue() plugin because the storybook builder already includes it and you’ll end up with a duplicate, and you need to specify options to the vueI18n plugin:

diff --git a/.storybook/main.js b/.storybook/main.js
index f388ad7..6a16dfb 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -33,7 +33,14 @@ module.exports = {

     return mergeConfig(previousConfig, {
       ...config,
-      plugins: [vue(), vueI18n(), eslintPlugin()],
+      plugins: [
+        vueI18n({
+          include: path.resolve(__dirname, "../src/locales/**"),
+          compositionOnly: false,
+          runtimeOnly: false,
+        }),
+        eslintPlugin()
+      ],
     });
   },
 };

When I make that change, storybook builds correctly. Let me know if you still have any issues though.