Can't Resolve Vue Components with @ in Storybook

I managed to resolve this issue by adding the following in .storybook/main.js

const path = require("path");module.exports = {  stories: ['./../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],  ...  webpackFinal: async (config) => {    config.resolve.alias = {      ...config.resolve.alias,      "@": path.resolve(__dirname, "../src/"),    };    // keep this if you're doing typescript    // config.resolve.extensions.push(".ts", ".tsx");    return config;  },}

Here are some useful links to help provide further context:

• StoryBook docs for webpackFinal - gives you the first clue as to how you might go about configuring your webpack configuration
• And then this solutionon an issue in Github provided the final piece of the puzzle

I have no idea what the cause for your issue is, but here is my working vue.config.js

const path = require('path')module.exports = {    chainWebpack: config => {        config.module            .rule("i18n")            .resourceQuery(/blockType=i18n/)            .type('javascript/auto')            .use("i18n")            .loader("@kazupon/vue-i18n-loader")            .end();    },    configureWebpack: {        resolve: {            extensions: ['.js', '.vue', '.json'],            alias: {                '@': path.join(__dirname, '/src')            }        },        module: {            rules: [                {                    test: /\.(graphql|gql)$/,                    exclude: /node_modules/,                    loader: 'graphql-tag/loader',                },            ]        },    },    css: {        loaderOptions: {            sass: {                data: `@import "@/assets/sass/_variables.scss"; @import "@/assets/sass/_mixins.scss";`,            }        }    }}

Just ignore all the stuff that you dont need