Loox Uと初音ミクで行こう！

NextJS を 13.5 に上げたら、Netlify で API Routes が使えなくなった 基本的に、NextJS をフレームワークとして使う場合は Vercel を使っていれば、変なトラブルに巻き込まれる事はないのだが、今回 netlify で作っていたアプリがコケたので、その知見を書き記したい。 事象 API Routes が全く動作しなくなった。エラーとしては 502 (Bad Gateway) が出ているが、実際にログを精査すると、 Runtime.ImportModuleError: Error: Cannot find module 'styled-jsx/style' というエラーが出ている事が分かった。 検索結果 Runtime.ImportModuleError: Error: Cannot find module 'styled-jsx' - Nextjs + NextAuth - #2 by hrishikesh この記事を見ると、@netlify/plugin-nextjs の 4.38.0 以上を入れろとなっている。だが、これをやっても駄目だった。 最終的な解決策 色々試して、NextJS の 13.5 以上は現在 netlify で API Routes が使えない事が分かったので、 NextJS をダウングレード して対応した。 最近、自分は bun を愛用しているので、 bun add [email protected] を実行して、package.json の中身を更新するだけで良かった。 完走した感想 ぬわああああん疲れたもおおおおん。 コイツいつも疲れてんな。 正直今回のバグはエグくて、いわゆる環境バグ。 おま環と言われても仕方がないレベルなので、再現性はもちろん、解決方法も簡単には見つからない。 今回、泣く泣くダウングレードという策を採用したが、もう少し深い所での解決を出来るようになりたい。

netlify で node-gyp のビルドが失敗した時 node-gyp という、nodejs回りを触っていたらなんか勝手にインストールされる奴がいるんだけれど、毎度毎度ビルド回りで、困らせてくる。 今回は、netlifyでビルドしようとした時にこいつのビルドが出来なくて、困ったので、その備忘録。 自分がビルドしようとしたnode-gypのバージョンは、8.4.1（2022å¹´3月現在）。 こいつのビルドには、どうやらPython3.6以上が必要。 しかし、netlifyのデフォルトでは Python3.5.2が使われていたのでコケてしまった。 なんだこいつ。 https://docs.netlify.com/configure-builds/environment-variables/ と、 https://github.com/netlify/build-image/blob/xenial/included_software.md を見て、どうやらPYTHON_VERSIONに3.7を指定出来るようなので、Deploys > Deploy settings > Environmentを選び、PYTHON_VERSIONを追加した。 ついでに、NODE_VERSIONも今使っている16.14にアップデートしておいた。 これでビルドが上手く通った。 node-gypって何に使ってるん？ node-gypって何に使ってるんでしょうね。 なんか色々入れていると気がついたら毎回入ってくる感じで、マジで捨てたい。 こいつのビルドエラーは頻繁に起こっている印象があり、開発体験を著しく悪くしているのでなるべくサクサクと倒せるようになりたい。

nyaan更新でハマった 拙作だが、 にゃ～ん というふざけたウェブサービスを作っている。 猫の画像が出てきて、ボタン（？）をクリックするとにゃーんとつぶやけるだけのシンプルなサービスである。 これを本当に久々に更新したら、色々エラーが出て、知見を得られたので、公開。 CopyWebpackPlugin の構文が変わっていた。 以前のCopyWebpackPluginは new CopyWebpackPlugin([ { from: "src/images/", to: "" }, ]); と書くことが出来たが、今はできない。 new CopyWebpackPlugin({ patterns: [ { from: "src/images/", to: "" }, ] }); と書く必要がある。 いつの間にそうなってたんだろうｗ 配列から、ハッシュへ。 まあこの辺はエラーメッセージなどを舐めればそこまで難しくはない。 deploy 時のエラー > webpack --config webpack.prod.config.js --mode production /opt/build/repo/node_modules/copy-webpack-plugin/node_modules/p-limit/index.js:30 } catch {} ^ SyntaxError: Unexpected token { deploy時に謎のエラーが出ていた。これは、 https://github.com/sindresorhus/p-limit/commit/b35faf54fb0871d9ae592069a18083a2ba15d8a9#diff-168726dbe96b3ce427e7fedce31bb0bc に書いてある通り、Node.js 10からは、valid syntax になったからだったようだ。 netlifyでビルドするためのNodeのバージョンを上げれば良かったので、 ここのドキュメント を参考にして、B...