Storybook을 가져올 때 웹 패키지 버전으로 가득 채우면

날과 씨

Storybook의 공식에 따라 설치하고 실행하면 다음과 같은 오류가 발생합니다
TypeError: Cannot read property 'get' of undefined

까닭

단지 보았을 뿐 어떻게 된 일인지 모르겠지만, 사용한 웹 페이지의 판본이 다르기 때문에 찾아보았다
공식적인 init 명령을 입력하면 웹 팩 4를 자동으로 사용할 것 같고, 웹 팩 5를 사용하면 오류가 발생할 것 같다(더 간단하고 알기 쉬운 오류가 발생하길 바란다...)

해결책

.storybook/main.js를 덮어쓰면 웹 패키지 5에 적응할 수 있습니다

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-postcss"
  ],
  "core": {
    "builder": "webpack5"
  }
}

(core 섹션 추가)
또는 init에 옵션을 추가하면 자동으로 웹 페이지에 적응할 수 있습니다 5

npx sb init --builder webpack5

(공식: https://storybook.js.org/blog/storybook-for-webpack-5/）

결실

이렇게 명령을 실행하면storybook이 실행되고 브라우저가 열립니다.
기쁘고 축하할 만하다