[TailwindCSS]コメントアウトしたコードでビルドエラーが出るって知ってました？

Next.js, TypescriptでTailwindCSSを扱っていた際、不意にエラー箇所を特定できないタイプのビルドエラーが出まして、作業中のコードをコメントアウトしながらデバッグしていたのですが、一向にエラーが解消しませんでした。

課題

突然ビルドエラーが発生するようになってしまった。なんとかしたい。

エラー内容

次のようなコラーになります。

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[11].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[11].use[2]!./src/styles/globals.css TypeError: Cannot read properties of undefined (reading '5')

ビルド時にCSSまわりが原因でエラーが出ているようです。globals.cssはいわゆるTailwindをインポートする用のコードを置いていただけで、エラー箇所の特定まではできません。

該当コード

参考として、こんな感じのコードを置いてました。（以下でエラー出るかは未確認）

// コメントアウト状態です！
// <input id="published" class={`peer/published_${sample}`} type="radio" name="status" />
// <label for="published" class={`peer-checked/published_${sample}:text-sky-500`}>Published</label>
// 参考：https://tailwindcss.com/docs/hover-focus-and-other-states

もしかするとバッククオートで囲んでなかったかも？
（いずれにしてもコメントアウト状態でエラーが出ていた。）

対応

調べても明確な解決策が見つからず、別ブランチでは問題ないか等の確認や関連しそうなパッケージを入れてみたり、パッケージの再インストールや更新、nodeのバージョン確認などを試してしまいました。

結論として、コメントアウト箇所のコードに対してエラーが出ていました。（エラー再現確認済み）

原因

フォーム内のクラス名にTailwind用のクラス名を変数で入れていたのが原因だったようです。深ぼっていないですが、Tailwindのクラスをビルドする際にコメントアウト内のクラス名も取得してるんですかね。

まとめ

雑多な作業をしている中だったので、前の状態にコードを戻すわけにもいかなかったのと、コメントアウト内のコードに対してエラーが出るとは思っていなかったので、盲点でした。

ニッチなエラーですが、世界の一人でも役に立ったらと思い記事として置いておきます。