nextjs 13.4 버전에서 storybook 7버전 실행시 오류 발생

nextjs 13.4버전에서 storybook 7 버전 이상 실행시 (webpack5) 오류가 발생합니다.

해당오류의 목록은 아래와 같습니다

 

1. fs모듈 없음

ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '*node_modules/next/dist/compiled/gzip-size'

 

 

2. stream-browserify polyfill 오류

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'

 

3. browserify-zlib polyfill 오류
If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
        - install 'browserify-zlib

 

 

스택 오버플로우에서는 아래와 같은 오류일 때 버전을 업데이트 하라고 가이드 주고 있습니다

https://github.com/storybookjs/storybook/issues/22686

[Bug]: @storybook/nextjs incompatible with Next 13.4.3 · Issue #22686 · storybookjs/storybook

 

위 가이드 대로 next는 13.4.9 버전 storybook은 7.0.26 으로 가장 최신 업데이트를 하였고 정상 스토리 북 동작을 확인하였습니다.

 

최종적으로 해결법은 아래와 같습니다

 

1. nextjs와 storybook을 가장 최신의 버전으로 업데이트하기 (추천)

2. nextjs를 13.3 버전으로 다운 그레이드 하기

 

 

제가 생각하기에 nextjs 버전이 13.4에서 올라가면서 필요없는 polyfill 몇개를 제거하면서 의존성있는 storybook이 영향을 받은것으로 생각됩니다.