【Next.js】デプロイでこけてlocalいじったら死んだ話【AWS Amplify】

久々にNextいじって、いい感じにできたのでデプロイした時。

22 error Exit status 1
23 error Failed at the nomulog_v2@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.

???
なんぞこれ。
調べてみるとwebpack.config.jsにmodeを追加する必要があるらしい。
だが、webpackとかいじったことがなくさっぱりなのである。
とりあえずトップレベルにwebpack.config.jsを作って記事にあったコードを入れてデプロイしてみるも変化なし。

そもそもlocalでは動作してるんだよなぁと思って再度実行したところ。

動けNext! なぜ動かん!!

さっきまで動いてたはずのNext君が砕け散ったのである。スイカバーが刺さったのである。
たぶん、今まではビルドコマンドたたかずにテストしてたからなのかなとか思っているが正直覚えていない。
いったい何が原因なのかわからないが、迷宮に突き落とされたので同にか脱出しようといろいろ試していく。

やったことリスト(覚えてる限り)

• モジュールの削除と再インストール
• Nodeのバージョンアップ
• webpackとwebpack-cliをインストール
• 新しくプロジェクト立てて原因調査
• モジュールをひとつづつ入れてどれが影響してるか確認
• npmのバージョンアップ
• npm install sass
• next.config.jsの修正
• *.scss -> *.module.scss

上からやった理由とか結果を載せてく。

モジュールの削除と再インストール

とりあえず依存関係の問題でなんか動かんのやろ、とか思ってnode_modulesとpackage-lock.jsonを削除して再インストールしてみる。

$ npm cache clean --force
$ npm install --save-dev

結果は変わらず。

Nodeのバージョンアップ

何となくバージョンのせいかと思いバージョンアップしてみる。
Nodeのバージョンアップは、公式から新しいインストーラーを持ってきて実行すればいいので割愛。

結果は変わらず。

webpackとwebpack-cliをインストール

どうやらwebpack4からはcliがいるとのことなのでこれを入れてみる。

$ npm install webpack --save-dev
$ npm install webpack-cli --save-dev

確かこれを実行した段階でエラー内容が変わった気がする。
残念なことに詳しいエラーは覚えていないが、SASSがコンパイルできないよ!みたいなエラーだった気がする。
今まで実行できてたのに謎だったので、新しく環境立ち上げていろいろ試すことにした。

新しくプロジェクト立てて原因調査

もしかしたらそもそも動かないんじゃないか…とすべてを疑い始めたのでnpm create-next-appで新しくプロジェクト作って実行してみた。
もちろん動く。

モジュールをひとつづつ入れてどれが影響してるか確認

やっぱりモジュールのせいかと思って、一個ずつインストールしては実行を繰り返してみた。
もちろん動く。
npm install --save @zeit/next-sass node-sassを実行後、
そういえばnext.configにもSASSの設定あったなーと思い、

next.config.js

const withSass = require('@zeit/next-sass')
module.exports = withSass({
  cssModules: true
})

とやったところ、おんなじエラーが出た。

npmのバージョンアップ

もしかしてバージョンのせいではと思い(n回目)バージョンアップさせてみるも変化なし。

npm install sass

あきらめずにバージョンが悪い!という固定概念の元調べ続けた結果、
どうやらNextが普通にSCSSをコンパイルできるらしいことを知った。昔の私はなんでこれしてなかったんだろう。わからん。
ということで

$ npm install --save-dev sass

インストールして、config.jsをもとに戻した。
またまたエラーが変わって確か

TypeError: Cannot read property 'tap' of undefined

が出てきたと思う。

next.config.jsの修正

原因がwebpakc4のせいらしく、webpack5を使いましょう、的なことだった。
なのでnext.config.jsを修正する。

next.config.js

module.exports = {
  future: { 
    webpack5: true, 
  },  
  reactStrictMode: true,
}

するとエラーが変わり、

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages\_app.tsx.

となった。

*.scss -> *.module.scss

上記の原因は、scssファイル名にmoduleが含まれてないとglobal CSS扱いになって、global CSSは_app.tsxでしか使えないよ!とのこと。
なのでファイル名を変更していった。もちろん対応するimport部分も修正。

こいつ... 動くぞ！

ようやくlocalでの実行ができるようになりました。
いろいろやったので直接的な原因がどれなのかさっぱりですが、多分@zeit/next-sassあたりが大きかったと思います。
localで今まで動いてたのはきっとデプロイ->実行という流れを試してなかったからだと思います。(next startしかやってない)

ちゃんとデプロイもできたので万々歳ですね。
まだ出来上がってないですがデプロイできた時はうれしいものです。

引き続き躓きながら開発できればいいかな。
(何とでもなるはずだ!)