[Storybook] React18+Webpack5+Storybook7 alias 설정

Error

Module not found: Error: Can't resolve '@utils/~~~' in '~~~~~~~~~'

 

리액트 프로젝트에서 이미 path alias를 사용할 수 있도록 설정이 되어있었다.

그런데 스토리북에서는 모듈을 찾을 수 없다고 나오는게 아닌가? ㅠㅠ 

찾아보니 스토리북은 별도의 빌드환경을 사용하기 때문에 webpack 설정을 따로 해주는 것이 필요한 것으로 보인다. 

 

웹팩 설정해주면 된다는 건 알겠는데 뭔가 찾아보는 코드마다 조금씩 달라서 계속 안되서 하루종일 삽질...ing

뭔가 될듯 말듯 하는게 더 짱나...........

 

 

tsconfig.json

{
  "compilerOptions": {
    { ..... }, // 당신의 기존 설정값들...

    "include": ["src"],
    "extends": "./tsconfig.paths.json"
  }
}

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@utils/*": ["utils/*"],
      "@components/*": ["components/*"],
    },
  }
}

./storybook/main.ts

'config.resolve.plugins' is possibly 'undefined' 라고 뜰건데, 이거 해결하는 방법들이 나와 있긴 한데,

그걸 하고 나면 이제 webpackFinal 에 빨간줄이 그어진다.... 그래서 걍 일단 @ts-ignore 해버림🤦‍♀️

import type { StorybookConfig } from "@storybook/react-webpack5";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
import path from "path";

const config: StorybookConfig = {
    addons: [...],
    docs: {
    	autodocs: "tag",
    },
    framework: {
        name: "@storybook/react-webpack5",
        option: {},
    },
    staticDirs: ["..\\public"],
    stories: [...],

    // 여기부터~~~~~~~~~~~~~~~~~~~~~~
    webpackFinal: async (config) => {
    	//@ts-ignore
        config.resolve.plugins.push(
            new TsconfigPathsPlugin({
                configFile: path.resolve(__dirname, '../tsconfig.json'),
            }),
        );
    	return config;
    },
};

 

 

참고

ts-cra-storybook을 사용한 프로젝트에서 Alias 설정하기