react-modal-sheetをNext.jsで使うときに発生するES Moduleなんたらのエラーを解決する

自分用の落書きです。

この問題のやつ。

https://github.com/Temzasse/react-modal-sheet/issues/108

---

1. コンポーネントファイルとして別のtsxファイルに書き移す。（準備する）

何でも良いのでコンポーネントファイルを作ります。

ModalSheet.tsx

import Sheet from "react-modal-sheet";

function ModalSheet() {
  return (
    <Sheet isOpen={true} onClose={() => {}}>
      <Sheet.Container>
        <Sheet.Header />
        <Sheet.Content>ほげほげコンテンツ</Sheet.Content>
      </Sheet.Container>

      <Sheet.Backdrop />
    </Sheet>
  );
}

export default ModalSheet;

2. このコンポーネントをSSRでレンダリングしないように読み込む（使用する）

hoge.tsx

import dynamic from "next/dynamic";

const ModalSheet = dynamic(() => import("ModalSheet"), {
  ssr: false,
});

export default function Hoge () {
  return <ModalSheet />
}

これでフロント側だけでレンダリングされて動いてくれます。
未来の自分よ、この記事見るの何回目だ？

---

コンポーネントを1つのファイルにまとめて、それを呼び出すには。

▼コンポーネントを準備：

DeviceDetector.tsx

import { ReactNode } from "react";
import { BrowserView, MobileView } from "react-device-detect";

function MobileOnlyView({ children }: { children: ReactNode }) {
  return <MobileView>{children}</MobileView>;
}

function BrowserOnlyView({ children }: { children: ReactNode }) {
  return <BrowserView>{children}</BrowserView>;
}

export { MobileOnlyView, BrowserOnlyView };

▼コンポーネントを使う

Hoge.tsx

import dynamic from "next/dynamic";

const BrowserOnlyView = dynamic(() => import("./DeviceDetector").then((module) => module.BrowserOnlyView), {
  ssr: false,
});
const MobileOnlyView = dynamic(() => import("./DeviceDetector").then((module) => module.MobileOnlyView), {
  ssr: false,
});