🍆
react-modal-sheetをNext.jsで使うときに発生するES Moduleなんたらのエラーを解決する
自分用の落書きです。
この問題のやつ。
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,
});
Discussion