Node v17 이상의 Storybook 환경에서 발생하는 ERR_OSSL_EVP

110% building 1/7 modules 6 active /Users/doda/workspace/doda/node_modules/@storybook/addon-links/preview.js-generated-config-entry.jsnode:internal/crypto/hash:71
2  this[kHandle] = new _Hash(algorithm, xofLen);
3                  ^
4
5Error: error:0308010C:digital envelope routines::unsupported
6    at new Hash (node:internal/crypto/hash:71:19)
7    at Object.createHash (node:crypto:133:10)
8    at module.exports (/Users/doda/workspace/doda/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/util/createHash.js:135:53)
9    at NormalModule._initBuildHash (/Users/doda/workspace/doda/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:417:16)
10    at handleParseError (/Users/doda/workspace/doda/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:471:10)
11    at /Users/doda/workspace/doda/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:503:5
12    at /Users/doda/workspace/doda/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:358:12
13    at /Users/doda/workspace/doda/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:373:3
14    at iterateNormalLoaders (/Users/doda/workspace/doda/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
15    at /Users/doda/workspace/doda/node_modules/@storybook/builder-webpack4/node_modules/loader-runner/lib/LoaderRunner.js:205:4 {
16  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
17  library: 'digital envelope routines',
18  reason: 'unsupported',
19  code: 'ERR_OSSL_EVP_UNSUPPORTED'
20}
21
22Node.js v18.12.0

에러가 발생한 스택을 확인해보면, @storybook/builder-webpack4 에서 발생하고 있는 것을 확인할 수 있다.

즉, webpack 4의 문제인 것으로 파악되어 해당 문제에 대해 이슈를 검색해보았다. 관련 이슈를 확인해보면 역시나 webpack 4 환경에서도 동일한 문제가 발생하고 있었다.

해결법

Webpack 5 사용

나는 이 방법을 사용했다. Next.js의 영향으로 Webpack 5를 주력으로 사용하고 있기 때문이다.

Storybook에서 Webpack 5를 사용하는 방법은 대략 다음과 같다.

1. storybook 관련 패키지를 설치

1yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5

2. .storybook/main.js 설정 변경

1module.exports = {
2  ...
3  core: {
4    builder: 'webpack5'
5  }
6  ...
7};

Webpack 4를 사용하면서의 해결법

나는 Webpack 4에 미련이 없어서 그냥 버전을 올려버렸지만, Webpack 4를 부득이하게 사용해야 할 땐 어떻게 해야할까?에 대한 답변은 StackOverflow에서 명확하게 찾을 수 있었다.

Webpack build failing with ERR_OSSL_EVP_UNSUPPORTED

I'm having an issue with a Webpack build process that suddenly broke, resulting in the following error... <s> [webpack.Progress] 10% building 0/1 entries 0/0 dependencies 0/0 modules node:int...

https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported

다만 역시나 직접 시도해보진 않았으므로, 사용 시에 주의를 요한다.

ref

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