"Neither (...).vue nor (...).js nor ... could be found in (...)" when rendering component

[EddyPuggle]

When accessing the story for a component that imports a ts file that exports the component props type, it generates the following warnings:

[15:51:54]  WARN  Neither '~/components/ExampleComponent/ExampleComponent.vue' nor '~/components/ExampleComponent/ExampleComponent.js(x)' or '~/components/ExampleComponent/ExampleComponent/index.js(x)' or '~/components/ExampleComponent/ExampleComponent/index.ts(x)
' could be found in 'D:/Projects/exampleProject/components/ExampleComponent'

Something to note is, that the story still works as expected. The warning is something that bothers.

[rherwig]

My best guess without having seen the project or storybook's main.ts would be that storybook does not pickup on your tsconfig aliases. To test this, switch out the ~ for the relative path.

I used the viteFinal function in the .storybook/main.ts to add paths, just for reference.

import { mergeConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import type { StorybookConfig } from '@storybook/vue3-vite';
import { fileURLToPath } from 'node:url';

const config: StorybookConfig = {
    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@chromatic-com/storybook',
        '@storybook/addon-interactions',
    ],
    framework: {
        name: '@storybook/vue3-vite',
        options: {},
    },
    docs: {
        autodocs: 'tag',
    },
    viteFinal(config, { configType }) {
        return mergeConfig(config, {
            plugins: [vue()],

            resolve: {
                alias: [
                    {
                        find: '~',
                        replacement: fileURLToPath(new URL('../src', import.meta.url)),
                    },
                ],
            },
        });
    },
};

export default config;

[tobiasdiez]

Could you please provide a reproduction, preferable based on https://github.com/nuxt-modules/storybook/tree/main/examples/starter or https://stackblitz.com/edit/nuxt-modules-storybook-uvf8dh.

[tobiasdiez]

Closing this issue due to inactivity :zzz: Please reopen the issue with additional information if the problem persists.

[daniluk4000]

Spent a few hours on this one.

Workaround that worked for us

import type { StorybookConfig } from '@storybook-vue/nuxt';

const config: StorybookConfig = {
    stories: ['../app/**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
    ],
    framework: {
        name: '@storybook-vue/nuxt',
        options: {
            docgen: {
                plugin: 'vue-component-meta',
                tsconfig: 'tsconfig.json',
            },
        },
    },
    docs: {
        autodocs: 'tag',
    },
};
export default config;