<div id="readability-page-1" class="page"><div>
            <p>[Storybook] React18+Webpack5+Storybook7 alias 설정</p>
          </div></div>

zineeworld

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;
    },
};
 
 
참고

[Storybook] React18+Webpack5+Storybook7 alias 설정

댓글