Storybook Emotion11 충돌 오류

생성일

Dec 3, 2021 06:44 AM

기록자

해결 여부

속성

Storybook

카테고리

이슈

🔥 문제

팀끼리 몹 프로그래밍 중 다음과 같은 에러가 발생하였다.

이후, 스토리북에서는 다음과 같은 오류 메시지가 화면 상에 출력되었다.


Oh no! Your Storybook is empty. Possible reasons why:
The glob specified in main.js isn't correct.
No stories are defined in your story files.

📢 해결과정

일단 스택 오버플로우에서 다음과 같은 글을 발견하였다.

내용을 보면, 바벨의 preset이나 plugin의 문제라고 한다.

하지만, 이미 플러그인과 프리셋의 경우 문제가 없었고, 다른 해결책을 찾아야 했다.

따라서 주목한 것은, @emotion/styled/base를 resolve할 수 없었다는 거였다.

이에 대한 원인을 탐색해 본 결과 한 블로그 글에서 해결할 수 있었다.

원인을 자세히 분석해보니...

기본적으로 style 인자를 받아오는 패키지의 경우 emotion의 버전이 10일 때 최적화되어 있다.

하지만 현재의 emotion 경우, 라이브러리의 버전이 11이었고, 따라서 충돌을 일으킨다는 것.

따라서 웹팩 설정에 대한 일종의 조작(?)을 .storybook/main.js에서 처리해줘야 했다.

.storybook/main.js


webpackFinal: async (config) => ({
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        '@emotion/styled': resolvePath('node_modules/@emotion/styled'),
      },
    },
  }),

📝 참고자료

https://xo.dev/fix-storybook-emotion-11-error/