[Storybook 오류] webpack < 5 used to include polyfills for node.js core modules by default.

storybook을 실행하다가 아래와 같은 오류를 마주했다.

webpack5 부터는 더이상 node.js를 위한 polyfills를 기본으로 제공하지 않는단다. 하지만, 사용하고 있는 모듈에서 crypto를 활용하기 때문에 에러가 발생한다.

polyfills란 무엇인가?

polyfills는 오래된 브라우저에서 지원하지 않는 현대 자바스크립트 기능이 작동될 수 있도록 도와주는 코드이다.

또한, 크롬이랑 익스플로러 등 다양한 브라우저들이 존재하는데 브라우저마다 작동될 수 있는 기능들이 다르다. 그렇기 때문에 polyfills가 특정 브라우저에서 지원되지 않는 기능들을 매꿔주는 역할을 한다.

왜 webpack 5 부터는 더 이상 polyfills를 포함하고 있지 않는가?

Node.js에는 암호화 관련 작업을 수행하는 등 다양한 작업을 수행하기 위한 코어 모듈이 여러개 있다.

이전 버전의 webpack(5 버전 이전)에서는 이러한 코어 모듈이 브라우저 환경에서 사용할 수 없음에도 불구하고 번들 출력에 포함시켰다. 특정 Node.js 코어 모듈을 클라이언트 측 JavaScript 코드에서 사용하려는 개발자들에게 유용했기 때문이다.

webpack 5부터는 이러한 모듈을 번들에 자동으로 포함하지 않도록 변경되었는데, 일반적으로 Node.js 코어 모듈을 직접 브라우저에서 사용하지 않는 것이 권장되기 때문이다.

해결방법💡

1. 필요한 polyfill를 직접 설치하기

npm install crpyto-browserify

2. ".storybook/main.js" 파일 수정하기

module.exports = {
    stories: [
        '../src/**/*.stories.mdx',
        '../src/**/*.stories.@(js|jsx|ts|tsx)',
    ],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-interactions',
    ],
    framework: '@storybook/react',
    core: {
        builder: '@storybook/builder-webpack5',
    },
    typescript: {
        reactDocgen: false,
    },
    staticDirs: ['../.wasm'],
    webpackFinal: async (config, { configType }) => {
        config.resolve.fallback = {
            crypto: require.resolve('crypto-browserify'),
        };
        return config;
    },
};

위 config와 같이 webpackFinal 내부 confi.resolve.fallback에 crypto 관련 코드를 추가해준다.

(polyfills를 아예 사용하고 싶지 않다면 "require.resolve('crypto-browserify" 대신 false를 넣어줘도 된다.)

참고자료: chatgpt