RemixでDynamic Import を使いたい時

nextJS同様 document 等を使うクライアントライブラリを import すると document undefined ようなのエラーが吐くので、現時点ではRemixにはNextJSのようなdynamic importがなく、remix-utils というライブラリを使って簡潔に書ける方法を発見したので、書き残しておきたいと思います。

方法1

JS の import() 関数をuseEffectで使う方法です。

App.jsx

export default function App(){

  const [TestComponent, setTestComponent] = useState();

  useEffect(()=> {
  
    import ("@some-client-only-component").then(({Component}) => setTestComponent(Component));

  })
  
 if(!TestComponent) return null;

 return (<TestComponent/>)

}

方法2

まず親からファイルを分けて、分けたファイル名を *.client.jsxに変更する(多分しなくて動く）

TestComponent.clinent.jsx

 export default function TestComponent() {

  const doc = document;

  return <div>{doc.toString()}</div>

 }

App.jsx

import { ClientOnly } from 'remix-utils';
import TestComponent form './testComponent.client';

export default function App() {

  return (
   <ClientOnly>
      {() => <TestComponent/>}
   </ClientOnly>
  )
}