見出し画像

Next.jsのアップデートによってKonvaのセッティングがちょっっっっっと面倒になってた。

2023/11/30(木)追記

この内容では、npm run buildでエラーが起きました。詳しくは、「npm run buildを通す方の設定!!!」にて!


はじめに

進化が凄まじいですね。Next.js。AppRouterなどまだ真価は引き出せていませんが、頑張って進歩に追従しています。

さて、Webで図形を動かしたい・生成したいというとき、皆様何を使うでしょうか?p5.js?バニラjsでcanvasをゴリゴリに?
もっっっとReact系を使っている恩恵を感じたくないですか?

そこで!私はKonvaを推します。DOMのReact感を残しつつ、多レイヤー描画もできる、機能面と雰囲気面の両方とも好きなパッケージです。

環境と時期

  • 2023/11/29(追記11/30)

  • node v20.10.0(LTS)

  • npm 10.2.4

  • next.js 14.0.3

  • konva ^9.2.3

2022年までのお話

ただ、コンポーネントを呼び出すのは少し面倒で、いくつか追記する必要があります。

その内容はNext.js + react-konvaを使ってみたという1つの記事に集約されています。リンク先記事に完璧に書かれているので、具体的なコードは省きますが、以下の手順を踏みます。

  1. Konvaのパッケージを使ったコンポーネントを作る。(描画コンポーネント)

  2. 描画コンポーネントを読み込むコンポーネントで、dynamicを使った読み込み方をする。

最初できないときは焦りますが、これさえやれば、かなり良い開発体験ができるので、ここだけは!面倒くさがらないでください…!

2023年から(AppRouter以降)のお話

Konvaを潰す気か?としか思えないような、謎すぎる事象に襲われます。

「'canvas'なんてよくわからないよ」というエラー。分かってくれ。

「Can't resolve 'canvas'」、canvasが使えない。と。
正直、AppRouterになって終わってしまったと、そう思いました。ジョークアプリを作るつもりだったので、もう諦めようと。ただ、やるべき手順だけは一旦踏んでおくべきと考え、「Konva Can't resolve 'canvas'」と調べました。すると…

あったのです!!!解決策が!!!しかもGitHubのissueに!!

場所が100点過ぎます。どこかの質問掲示板、yahoo知恵袋よりもよっっぽどissueの議論のほうが正確です。

next.config.jsを次のように書き換えることでOKになります。

const nextConfig = {
  ...
  webpack: (config) => {
    config.externals = {
      canvas: "canvas",
    };
    return config;
  },
};

これだけで、コンパイルは通り、画面は表示されます!

コンパイル通過!!
画面

npm run buildを通す方の設定!!!

公開しようとbuildコマンドを実行したら、エラーが出ました!!!
今度はcan't resolve crittersと。しかし、またまたGithubのissueで解決されていました。回答部分はこちら!

ここから、buildとdevに関係なかった部分を除いた結果、next.config.jsをこの構成でbuildもdevも通ることが判明しました。

// next.config.js
const nextConfig = {
...
    experimental:{
        esmExternals: "loose", // required to make Konva & react-konva work
    },
    webpack:(config) => {
        config.externals = [...config.externals,{canvas:"canvas"}]; // required to make Konva & react-konva work
        return config;
    },
...
};

まとめ

Konvaを読み込む前には、

  1. next.config.jsに加筆

  2. dynamicで読み込む設定

を忘れていないか、チェックしましょう!!
よき図形描画ライフを!!!

この記事が気に入ったらサポートをしてみませんか?