Storybook cant't resolve modules in the project built with Quasar Vue3 Typescript

Question

I am new to storybook, and i am trying to configure storybook to my project, but i think there is a problem with my configuration. As starter, i created a NoResult.stories.ts file for my first story, everything was working fine but my svg file inside the component does not render, because storybook can't find it inside the project. After that i started creating other component stories in my project and i understood that storybook can't even resolve my api file(which i have been using with simply typing this.$api in everywhere ) How can i configure my base quasar config to storybook. Here is my NoResult component:

<template lang="pug">
.full-width.full-height.flex-center.column
  q-img(src="~@/assets/images/no-result.svg" width="100%" height="auto" fit="contain" style="max-width: 300px")
  .text-h6.q-mt-lg {{ title }}
  .text-body2.text-grey {{ subtitle }}
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'NoResult',
  props: {
    title: {
      type: String,
      default: 'No result'
    },
    subtitle: {
      type: String,
      default: 'try again'
    }
  }
})
</script>

here is my src/stories/NoResult.stories.ts

import HNoResult from '/src/components/h-no-result/index.vue'

export default {
 title: 'HNoResult',
 component: HNoResult
}
export const unconfigured = () => ({
 components: { HNoResult },
 template: '<HNoResult ></HNoResult>'
})

and here is.storybook/main.js file

const path = require('path')
//import quasar config file
require('../quasar.config.js')
//use quasarConfig as default config
//module.exports = quasarConfig
//add additional dependencies
module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.resolve.alias = {
    ...defaultConfig.resolve.alias,
    '@': path.resolve(__dirname, '../src')
  }
  return defaultConfig
}
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: '@storybook/vue3',
  core: {
    builder: '@storybook/builder-webpack5'
  },
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
    config.resolve.modules = [path.resolve(__dirname, '..', 'src'), path.resolve(__dirname, '..', 'node_modules'), ...config.resolve.modules]

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../')
    })

    config.module.rules.push({
      test: /\.pug$/,
      use: [{ loader: 'pug-plain-loader' }]
    })

    // Return the altered config
    return config
  }
}

and finally.storybook/preview.js file

import '@quasar/extras/roboto-font/roboto-font.css'
// These are optional
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/animate/fadeInUp.css'
import '@quasar/extras/animate/fadeOutDown.css'
import '@quasar/extras/animate/fadeInRight.css'
import '@quasar/extras/animate/fadeOutRight.css'

// Loads the quasar styles and registers quasar functionality with storybook
import 'quasar/dist/quasar.css'
import { app } from '@storybook/vue3'
import { Quasar } from 'quasar'

// This is also where you would setup things such as pinia for storybook

app.use(Quasar, {})

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/
    }
  }
}

And the error with the svg file is:

GET http://localhost:6006/~@/assets/images/no-result.svg 404 (Not Found)

Answer 1

I've made a github repo with an empty working project, based on Typescript, using Quasar 2, Vite and Storybook:

https://github.com/devhero/storybook-quasar-vite

In README.md you can find also the steps to build the project with your own preferences. I think it could be useful to solve major issues on make working all together.