Next12でkonva8を使うためにdynamic importを行ったメモ #React

概要

Next.jsの12とkonvaの8では、konvaがブラウザで読み込むesm前提になっているため、そのままでは以下のエラーが発生してしまう。

 require() of ES Module D:\project\node_modules\react-konva\lib\ReactKonvaCore.js not supported.
Instead change the require of Core.js in D:\project\node_modules\react-konva\lib\ReactKonvaCore.js 
to a dynamic import() which is available in all CommonJS modules.

dynamic importを使用して対応したメモを残す。Next - dynamic import No SSR

変更点

import React, { useEffect, useState } from 'react'
import { NextPage } from 'next'
import Head from 'next/head'
import fetch from 'isomorphic-unfetch'
- import Edit from '~/domain/kakuriyogarden/components/'
import { useCharacterViewModel } from '~/domain/kakuriyogarden/store/character'
import type { Magic } from '~/domain/kakuriyogarden/classes/gemory/magic'
import dynamic from 'next/dynamic'


+ const Edit = dynamic(() => import('~/domain/kakuriyogarden/components/'), {
+   ssr: false,
+ })

const Page: NextPage<{
  id: string
  pageTitle: string
  skills: any
}> = function () {
  const [skills, setSkills] = useState([])

  const pageTitle = 'カクリヨガーデン: キャラクター編集'
  const vm = useCharacterViewModel()

  return (
    <>
      <Head>
        <title>{pageTitle}</title>
      </Head>
      <Edit vm={vm} cardList={skills} />
    </>
  )
}
export default Page

ソース

参考

【JavaScript】基本的なモジュール（ESM）の使い方について【まとめ】
react-konva issue
firebase9に対応したメモ
 next-auth