404 - Storybook cannot find components

[Miguel-Bento-Github]

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 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.

[Miguel-Bento-Github]

@IanVS Thanks for the help, the issue left here is that I cannot build. Were you able to run yarn build?
I've made changes to the repo but the config is the same.

src/stories/Page.vue:75:15
error TS2322: Type '{ class: string; }' is not assignable to type  DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'.  
Property 'class' does not exist on type 
'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'. 
Did you mean 'className'?
<span class="tip">Tip</span>

I see this issue appearing at vuejs/core#1033 (comment)

Thanks in advance!

[IanVS]

I was able to successfully yarn build-storybook. Any errors that you might get from yarn build would not be associated with this project, I think.

[Miguel-Bento-Github]

@IanVS do you think it's related to this storybookjs/storybook#16630?
Seems like a storybook issue with a jsx parser or something like that. Should I open another issue at storybook?

[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.