Can't Resolve Vue Components with @ in Storybook

Question

I have setup a new vue project and added storybook to the project. When I have components that use the @/components path, it does not run correctly.

Can't resolve '@/components/EntityGrid/EntityGrid.Component.vue'

I have tried multiple webpack.config.js without any luck. What is the simplest webpack.config.js to fix this

This is happening in the default configuration without a webpack.config.js.

Answer 1

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 solution on an issue in Github provided the final piece of the puzzle

Answer 2

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