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つの記事に集約されています。リンク先記事に完璧に書かれているので、具体的なコードは省きますが、以下の手順を踏みます。
Konvaのパッケージを使ったコンポーネントを作る。(描画コンポーネント)
描画コンポーネントを読み込むコンポーネントで、dynamicを使った読み込み方をする。
最初できないときは焦りますが、これさえやれば、かなり良い開発体験ができるので、ここだけは!面倒くさがらないでください…!
2023年から(AppRouter以降)のお話
Konvaを潰す気か?としか思えないような、謎すぎる事象に襲われます。
「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を読み込む前には、
next.config.jsに加筆
dynamicで読み込む設定
を忘れていないか、チェックしましょう!!
よき図形描画ライフを!!!
この記事が気に入ったらサポートをしてみませんか?