[Copy Stack] 문제 해결: envelop routines

info @storybook/web-components v6.4.22
info
info => Loading presets

info => Ignoring cached manager due to change in manager config
i ｢wdm｣: wait until bundle finished: 
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported

스토리북을 실행하는데 대충 이런 에러가 떴습니다. 찾아보니 node 16v 이상에서 충돌이 있는듯 한데요. 현재 node LTS 버전이 18.12.1인데, 좀 당황스럽습니다.

혹시 싶어서 storybook을 6.5.15 버전으로 업그레이드 했는데, 에러가 늘었습니다

참고로 dependency를 보면

"@storybook/addon-actions": "^6.5.15",
"@storybook/addon-essentials": "^6.5.15",
"@storybook/addon-links": "^6.5.15",
"@storybook/builder-vite": "^0.2.6",
"@storybook/web-components": "^6.5.15",

어쩔 수 없이 node의 버전을 16.13.0으로 낮춰 사용하려 합니다.

nvm 설치

nvm을 설치해 node 버전을 변경할 예정입니다.

윈도우 기준 윈도우용 nvm을 따로 설치해야합니다.
https://github.com/coreybutler/nvm-windows/releases

위 링크에서 nvm-setup.exe 파일을 받고 실행해 nvm을 세팅합니다.

nvm 실행

cmd창을 관리자 권한으로 열고 nvm을 실행합니다.

# nvm 버전 확인
nvm --version

# 16.13.0 버전 설치
nvm install 16.13.0

# 설치되어있는 node의 버전별 목록 출력
nvm list

# 현재 사용중인 node
nvm current

# 버전 변경
nvm use 16.13.0

nvm use 로 버전을 변경하고 다시 스토리북을 실행하면

뷁

react를 깔아달라고 합니다.

react 설치

npm install -D react

npm run storybook

이번엔 react-dom을 깔아달라고 합니다. ㅂㄷ

스토리북이 실행되긴 하는데, 스켈레톤 로딩화면만 보이고 안넘어갑니다.

react-dom 설치

npm install -D react-dom

npm run storybook

마침내 잘 동작합니다.

정리

node 16.13.0 버전으로 다운그레이드
react,react-dom 설치