Resolving Alias Imports in an Electron Project with Storybook: Seeking Solutions

[tahirdibirovsoftware]

I'm facing a problem with resolving alias imports in my Electron project. The aliases work fine within the project itself, but Storybook can't resolve them. When I import a component in a story file, it throws an error, but as a relative import, it works fine. Even if the component is imported as a relative path in the story file but the component itself uses an alias import, it again throws the same error. How should I deal with this?

The stack used in the project includes: Electron (using the electron-vite boilerplate), TypeScript, SASS, React, and Storybook.

Here are the relevant parts of my configuration:

tsconfig.json:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.node.json" },
    { "path": "./tsconfig.web.json" }
  ]
}

tsconfig.node.json:

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],
  "compilerOptions": {
    "composite": true,
    "types": ["electron-vite/node"]
  }
}

tsconfig.web.json:

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
  "include": [
    "src/renderer/src/env.d.ts",
    "src/renderer/src/**/*",
    "src/renderer/src/**/*.tsx",
    "src/preload/*.d.ts"
  ],
  "compilerOptions": {
    "composite": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@renderer/*": [
        "src/renderer/src/*"
      ]
    }
  }
}

electron.vite.config.ts:

import { resolve } from "path";
import { defineConfig, externalizeDepsPlugin } from "electron-vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()],
  },
  preload: {
    plugins: [externalizeDepsPlugin()],
  },
  renderer: {
    resolve: {
      alias: {
        "@renderer": resolve("src/renderer/src"),
        "@resources": resolve("resources"),
      },
    },
    plugins: [react(), tsconfigPaths()],
  },
});

.storybook/main.ts:

import type { StorybookConfig } from '@storybook/react-vite';
import path from 'path';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  core: {
    builder: '@storybook/builder-vite'
  },
  async viteFinal(config, { configType }) {
    // ... any existing Vite config modifications 
    config.resolve!.alias = {
      '@renderer': path.resolve(__dirname, '../src/renderer'), // Ensure alignment with Vite config
      process: 'process/browser',
    };
    config.define = config.define || {};
    config.define['process.env'] = {}; 

    return config;
  },
}
export default config;