[Bug] Unable to find local modules using resolve alias

Describe the bug

In our project, we are using Vue 3, Typescript, and Vite. In our Vite config and Typescript configuration, we specify the alias to import local modules.

vite.config.js resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, },

tsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, }

It is working as expected when we are running the project using Vite.

In storybook i used this configuration to enable the same custom alias: module.exports = { framework: "@storybook/vue3", stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"], core: { builder: "@storybook/builder-vite" }, async viteFinal(config, { configType }) { return mergeConfig(config, { resolve: { alias: { "@": path.resolve(__dirname, "../src") }, }, }); }, };

When running Storybook we get this error: “Neither ‘@/mixins/wizardMixin.vue’ nor ‘@/mixins/wizardMixin.js(x)’ or ‘@/mixins/wizardMixin/index.js(x)’ or ‘@/mixins/wizardMixin/index.ts(x)’ could be found in ‘C:/repos/pia-app/frontend/src/views/wizards/travel’”

The actual file is @/mixins/wizardMixin.ts. I tried changing the file name to index.ts, but it is still not resolved.

Expected behavior

I was expecting the resolver to work in builder-vite as it does when running vite.

Screenshots and/or logs

[augustoody]

For anyone that might be facing this too, in my case, it seemed to be all related to how We use the resolve.alias. After trying another fix from a different thread here (that asked to remove some dependencies from preview.jsx, I found that my alias to @/components that was supposed to parse my app folder was all broken up.

Taking a look at the config coming back from viteFinal, it was setting the root folder as by .storybook folder. To my case just using the resolve.alias like this fixed it:

const path = require('path');

const toPath = (filePath) => path.join(process.cwd(), filePath);

module.exports = {
async viteFinal(config, { configType }) {
    ...,
    return mergeConfig(config, {
      resolve: {
        alias: {
          '@': toPath('app')
        }
      }
    });
  }
};

[torleifhalseth]

I created a local repo and tried to replicate the issue, but the custom resolver alias is working as expected in this project using the same dependencies and configuration 🤷‍♂️

The only difference is that the original repo has a lot of files with a deeper folder structure, but when trying to replicate this it is also working as expected.

I tried adjusting the blob to define where to retrieve stories from, specifying a single folder with stories that do not reference any of the components using resolver alias. What I notice is that some part of running “npm run storybook” is scanning all files even though the blob is specifying a single folder or file. Do you have any idea why this happens @IanVS and if this might be an issue related to vue-docgen-api https://vue-styleguidist.github.io/docs/Docgen.html#api scanning everything?