どこをどう調べても Error: Didn't get a result from child compiler. が解決できない

はじめに

Next.js + vanilla-extract な構成で開発していると、ふとしたタイミングで Error: Didn't get a result from child compiler. というエラーに出くわすことがあります。

弊社強々エンジニアへ駆け込んだところ「どっかで見たことある」とのことでちょちょいと調べていただき、秒で解決しました。2時間の苦労が10秒で解決することもある。

構成

• Next.js
  • App Router を使用 ※今回の話には関係ないです
  • tsconfig の Paths パラメータで絶対パス import を指定
• vanilla-extract

発生状況

• Dynamic Routes のセグメントに [id] を使用
• Foo.css.tsx を Foo.tsx から import

/
└─ app
   └─ [id]
      ├─ page.tsx
      ├─ Foo.tsx
      └─ Foo.css.tsx

Powered by Dir Maker

エラー内容

./app/[id]/Foo.css.tsx
Error: Didn't get a result from child compiler
Import trace for requested module:
./app/[id]/Foo.css.tsx
./app/[id]/Foo.tsx
./app/[id]/page.tsx

原因

import パスが webpack の予約語 と衝突している。
具体的には以下の文字が import パスに含まれている。

• [id]
• [name]
• [chunkhash]
• [contenthash]

解決策

Next の Dyanmic Routes のセグメント名を [userId] などに変更する。

今回の発生状況の例では以下のような感じ。

/
└─ app
   └─ [somethingId]
      ├─ page.tsx
      ├─ Foo.tsx
      └─ Foo.css.tsx

Powered by Dir Maker

まとめ

エラー解決を求めて調べまくりましたが、ピンポイントで [id] がダメなんてそんなんわかるかいーーー😇
エラーメッセージさんがもう少しフレンドリーであれば救われた命があるはず...ただそれにも理由があるんでしょうね

素早くアドバイスをくださった @Karibash さんありがとうございました🙏