builder-vite: [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

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 21 (10 by maintainers)

Most upvoted comments

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')
        }
      }
    });
  }
};

augustoody on Aug 16, 2022

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?

torleifhalseth on Apr 7, 2022

Sorry it took so long: https://github.com/thalseth/vite-project I had to use file upload to get it out there…

I will look at the issues you posted now.

torleifhalseth on Apr 7, 2022

Woop, I just caught the same warning output in the reproduced repository using mixins now. I did not see it immediately because the storybook was showing all components as expected. I will create the reproduction and post it when available on Github.

For some reason, I am not able to push directly to Github from this enterprise computer 🙈

Thanks for hanging in there @IanVS 🍻

torleifhalseth on Apr 7, 2022