Can't find module react/jsx-runtime.js 오류

중고마켓의 사이드바에 최근 본 상품을 플로팅 박스로 띄우고 싶어서 구글링하다 react-sticky-box라는 라이브러리를 발견했다.

🔗 npm 페이지
🔗 공식 홈페이지

사용법은 굉장히 간단했다.

npm i react-sticky-box

or

yarn add react-sticky-box

import StickyBox from 'react-sticky-box'

export const StickComponent = ():JSX.Element => {
  return (
    <div>
      <StickyBox>
          ...
      </StickyBox>
    </div>
}

위와 같이만 작성하면 되는 간단한 코드였다. 하지만 서버를 실행시키자 아래와 같은 오류가 떨어졌다.

구글링해보니 react와 react-dom을 최신버전으로 업그레이드하라는 답변이 많았다. 하지만 이 방법은 더 많은 에러를 야기시킬 것 같았다. 혹시나 싶어 해당 레포의 이슈를 확인하니 3월달에 같은 오류가 올라와있었다. 이슈가 해결된 상태는 아니었지만 댓글에서 도움을 얻었다.

import dynamic from "next/dynamic";

export const ViewItem = (): JSX.Element => {
  const StickyBox = dynamic(async () => await import("react-sticky-box"), {
    ssr: false,
  });
  return (
    <div>
      <StickyBox>
          ...
      </StickyBox>
    </div>
  );
};

해당 모듈을 클라이언트 사이드에서 렌더링을 하는 것이다. 댓글을 보니 해당 라이브러리 개발자도 왜 이런 에러가 나는지 정확한 원인은 파악하지 못한 듯 하다 😅. 모듈을 import 해오고 실행하면서 내부적으로 충돌되는 사항이 있는 듯 하다.