Vue 3 + Vite + Storybook - Error when importing files with alias

[vcpablo]

I'm trying to make Storybook work within the following scenario:
VueJS 3 + Vite + Storybook

They all have the latest versions installed.
Storybook runs fine but when I add one of my components to it, it throws this error:

It seems that files imported using @/ are not found.
Any idea? I couldn't find any topic that really solves it.
I've tried everything.

Here are some of my configurations:

package.json

{
  "name": "palpittero-fe",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "chart.js": "^3.8.0",
    "pinia": "^2.0.14",
    "pinia-plugin-persistedstate": "^1.6.1",
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primevue": "^3.15.0",
    "prismjs": "^1.28.0",
    "typescript": "^4.7.4",
    "vee-validate": "^4.5.11",
    "vue": "^3.2.25",
    "vue-i18n": "^9.2.0-beta.36",
    "vue-prettier": "^0.2.0",
    "vue-router": "^4.0.16",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/eslint-parser": "^7.18.2",
    "@babel/preset-env": "^7.18.2",
    "@intlify/vite-plugin-vue-i18n": "^6.0.0",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/builder-vite": "^0.2.2",
    "@storybook/testing-library": "^0.0.13",
    "@storybook/vue3": "^6.5.10",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/cli-plugin-babel": "^5.0.6",
    "@vue/eslint-config-prettier": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.5",
    "eslint": "^8.18.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-storybook": "^0.6.4",
    "eslint-plugin-vue": "^9.1.1",
    "node-sass": "^7.0.1",
    "prettier": "^2.7.1",
    "sass": "^1.53.0",
    "vite": "^3.0.4",
    "vite-plugin-eslint": "^1.7.0",
    "vue-loader": "^16.8.3"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  server: {
    port: 8080
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      find: '@vue/runtime-core',
      replacement: '@vue/runtime-core/dist/runtime-core.esm-bundler.js'
    }
  },
  plugins: [vue()]
})

js.config.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": [
    "node_modules"
  ]
}

/storybook/main.cjs

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-vite"
  },
  "features": {
    "storyStoreV7": true
  }
}

/storybook/preview.cjs

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

<script> of TeamsDataTable.vue component

<script setup>
import { computed } from 'vue'
import BaseStatus from '@/components/Shared/BaseStatus/BaseStatus.vue'
import BaseDataTable from '@/components/Shared/BaseDataTable/BaseDataTable.vue'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  teams: {
    type: Object,
    default: () => ({})
  }
})

const emits = defineEmits(['edit', 'delete', 'update:modelValue'])

const selectedTeams = computed({
  set(value) {
    emits('update:modelValue', value)
  },
  get() {
    return props.modelValue
  }
})

const handleEditTeam = (team) => emits('edit', team)
const handleDeleteTeam = (team) => emits('delete', team)
</script>

TeamsDataTable.stories.js

import TeamsDataTable from './TeamsDataTable.vue'

const teams = []

export default {
  title: 'TeamsDataTable',
  component: TeamsDataTable
}

const Template = (args) => ({
  components: { TeamsDataTable },
  setup() {
    return { args }
  },
  template: '<teams-data-table v-bind="args" />'
})

export const Basic = Template.bind({})
Basic.args = {
  teams,
  modelValue: []
}

Update
After some research, I've added the following code to a file named webpack.config.js within .storybook directory.
It still doesn't work =/ (same error)

const path = require("path");

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@/": path.resolve(__dirname, "../src/"),
    };
    config.resolve.extensions.push(".ts", ".tsx", ".js", ".vue");
    return config;
  },
};

[lobo-tuerto]

You might want to add a viteFinal instead of webpackFinal, something like this:

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-vite',
  },
  features: {
    storyStoreV7: true,
  },
  async viteFinal(config, options) {
    config.base = '/storybook/'

    config.resolve.alias = {
      ...config.resolve.alias,
      '@': '../src',
    }

    return config
  },
}

But still, it doesn't fully work.

[IanVS]

Hi, what error do you get after adding the alias to the viteFinal config?

Also note, that if you want to try out storybook 7, your project's vite.config.js will be used automatically, instead of having to set up the config twice. npx sb@future upgrade --prerelease if you want to try it out.

[lobo-tuerto]

Hey @IanVS I don't have the code at hand anymore but it had something to do with it working on dev, but when building it would not work.

Then I added a different alias (one for dev, one for prod) something like:

If it's dev then: '@': '../src'
If it's prod then: '@': './src'

And it kind of worked, but then it would complain on components that were importing TS files.
I just gave up :(

[lobo-tuerto]

Also, I just stumbled upon an alternative that might better suit Vue developers: https://histoire.dev/ 🧐

[odGit]

@IanVS I am looking for documentation on differences between @stroybook/builder-vite and @storybook/builder-webpack5 for use of config.resolve.alias['@']? My project's stack is Vue3 + Storybook + TypeScript + SaSS,

1. The project itself can be built for production/development with vite (see vite.config.js below)
2. The Storybook part of the project can be built with webpack5 (see main.js below)

./package.json

  "devDependencies": {
    ...
    "@storybook/addon-actions": "6.5.14",
    "@storybook/addon-essentials": "6.5.14",
    "@storybook/addon-links": "6.5.14",
    "@storybook/addons": "6.5.14",
    "@storybook/builder-webpack5": "^6.5.14",
    "@storybook/manager-webpack5": "^6.5.14",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/theming": "6.5.14",
    "@storybook/vue3": "6.5.14",
     ...
    "babel-loader": "^9.1.0",
    "css-loader": "^6.7.2",
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-is": "^16.13.1",
    "sass": "^1.56.1",
    "sass-loader": "^13.2.0",
    "storybook-vue3-router": "^2.2.1",
    "style-loader": "^3.3.1",
    "typescript": "~4.6.3",
    "vue-loader": "^17.0.1",
    "vue-tsc": "^1.0.8"
  }

./.storybook/main.js

const path = require("path");

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    '@storybook/preset-scss',
  ],
  core: {
    builder: "@storybook/builder-webpack5"
  },
  features: {
    storyStoreV7: true,
  },
  webpackFinal: async (config, { configType }) => {
    // Allow the use of Vue src alias in components.
    config.resolve.alias['@'] = path.resolve(__dirname, "../src");

    return config;
  },
};

3. Building storybook with 'vite' +' builder-vite' fails to import TS files, resulting in @storybook/api/FILE.ts import instead of @/api/FILE.ts
./.storybook/main.js ( with builder-vite)

const { mergeConfig } = require('vite');
const path = require('path');

module.exports = {
  stories: [
    '../src/**/*.stories.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-scss',
  ],
  framework: '@storybook/vue3',
  core: {
    builder: '@storybook/builder-vite',
  },
  typescript: {
    check: false,
    checkOptions: {},
  },
  features: {
    storyStoreV7: true,
    interactionsDebugger: true
  },
  async viteFinal(config, { ConfigType }) {

    const mergedConfig = mergeConfig(config, {
      // customize the Vite config here 
      resolve: { 
        alias: { 
          "@": path.resolve(__dirname, "../src/") 
        }, 
      },
    }); 

    console.log(mergedConfig); 
    return mergedConfig; 
  }, 
};

./vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { fileURLToPath, URL } from "node:url";


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
    preserveSymlinks: true,
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/sass/component.scss" as *;`,
      },
    },
  },
  server: {
    host: "0.0.0.0",
    port: 8081,
    strictPort: true,
    open: true,
    hmr: {
      port: 8081,
      host: "localhost",
    }, 
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"
    },
  },
  build: {
    outDir: resolve(__dirname, "./dist/PROJECT_NAME"),
  },
});

Any help or possible solutions would be much appreciated, as I am running of ideas...

[IanVS]

I would suggest upgrading storybook to 7.0, if possible. It's just about to hit beta, and it uses your vite.config.js automatically, without making you duplicate your config into viteFinal. If you want to try the upgrade, you can run npx sb@next upgrade --prerelease.

If that isn't possible for you for some reason, I'm not sure what the error is with your current config. The config itself looks fine. Maybe you could share the error message you're seeing.

[azraelgarden]

Hey @IanVS, just utilizing this thread to take off a doubt.
When we use npx init storybook in a vite project, it auto installs @babel/core, is it really needed?
I ask because I tried to remove it and looks like Storybook keep working like a charm...

[IanVS]

Yes you can remove it. We've fixed that in Storybook 7 to no longer install it. (You can install storybook 7 with npx storybook@next init

[Christianmo]

Something simple like this works for me:

async viteFinal(config) {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        '@atoms': '../src/components/atoms',
        '@molecules': '../src/components/molecules',
        '@organisms': '../src/components/organisms',
      }
    }
  };
},