fix-storybook-emotion-11-error/

[utterances-bot]

Storybook과 Emotion 11 충돌 오류 해결하기 – ~/xo.dev –

Emotion 11을 사용해서 컴포넌트 라이브러리를 개발하며 Storybook으로 문서화 및 테스트를 도입하려고 했는데, Storybook을 빌드하니 아래와 같은 오류가 발생했다.

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

[DoGukKim]

좋은 글 감사합니다. 저와 같은 경우는 이모션 11을 통해 스토리북 theme provier를 사용했으나, theme가 적용되지 않아 .storybook의 preview의 정보를 얻고자 합니다. 도움을 요청합니다.

[blurfx]

@DoGukKim 안녕하세요. 혹시 제가 도와드릴 부분이 있다면, 해당 문제가 발생하는 레포리터리의 주소를 알려주시거나, iam [at] xo [dot] dev로 이메일 주시면 감사하겠습니다.

[DoGukKim]

안녕하세요! themeprovider 사용이 emotion 11 스토리북에서 사용이 되질 않아서, 스토리북에서 제공하는 themeprovier를 사용해서 해결하였습니다. 혹시 next를 사용하고 계신다면 link, Image가 emotion으로 추가 스타일링이 되지 않는데 원래 그런 것인지 궁금합니다! 2021년 3월 31일 (수) 오후 9:18, changhui lee ***@***.***>님이 작성:

…

@DoGukKim <https://github.com/DoGukKim> 안녕하세요. 혹시 제가 도와드릴 부분이 있다면, 해당 문제가 발생하는 레포리터리의 주소를 알려주시거나, iam [at] xo [dot] dev로 이메일 주시면 감사하겠습니다. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#20 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOI334LI5WQMOH2ISNFC6HLTGMHKLANCNFSM42BJIQUQ> .

[blurfx]

@DoGukKim 저는 프로젝트에서 Emotion 11의 ThemeProvider를 사용하고 있으며 스토리북에서도 잘 작동하여 같은 상황이 아니라 확답을 드리기는 어려우나, Link 컴포넌트는 Link의 children에 추가적인 동작을 부여하고 children을 리턴하는 컴포넌트인 것으로 알고 있습니다. 그래서 styled(Link)와 같은 방식으로 사용하신다면 원하시는대로 스타일이 적용되지 않을것 같습니다. Link의 children을 스타일링 하는 것이 올바른 방법이라 생각되네요.
Image의 경우도 <img>가 아닌 한번 React 컴포넌트로 구조화되어 있어 적용되지 않을 것으로 보입니다. 이 경우는 styled 내에서 img 요소에 접근하여 스타일을 주는 방식으로 해결하면 될 것 같습니다.

styled(Image)`
  img {
    // ...
  }
`

ref:
https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx
https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx

[haeguri]

감사합니다. 이 글 덕분에 이슈를 해결했습니다 😄

[swcho]

Storybook에서 사용하는 emotion 10이 pre bundling 되어 충돌이 안나도록 수정한 것 같습니다.
storybookjs/storybook#13145 (comment)

비록 alpha 버전이지만 다음과 같이 업데이트 하고 정상 동작하는 것을 확인했어요.
npx sb upgrade --prerelease

물론 알려 주신 webpack alias를 제거해도 이상없이 동작했습니다.
정확한 릴리즈 버전은 아래와 같습니다.
https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.31

저 같은 경우는 일러주신 대로 했을 때, mdx 기반의 storybook에서는 정상동작을 하지 않더라고요.

오랜시간 고생해서 얻은 정보였을 텐데 자세히 정리해 주신 덕분에 도움이 많이되었습니다.
감사합니다.