Next.js を Windows 上で使っていると、ビルド時に
「Failed to compile」
「ERR_UNSUPPORTED_ESM_URL_SCHEME」
が同時に出てプロジェクトが止まるケースが増えています。特に 14.2.0 を長く使っている環境では、CSS ローダ周りとの衝突によって高い再現率で発生します。
ここでは、実際にユーザーが遭遇しやすい状況をもとに、原因の構造と再発防止を含めた具体的な修正手順を整理します。
■ 起きている問題の核心
今回のようなログでは、Windows の絶対パス（C:\...）が Node.js の ESM Loader によって “URLスキームを持つパス（c:）” と誤判定されます。その結果、Next.js の CSS パイプライン（css-loader → postcss-loader）が読み込みに失敗し、ビルド全体が停止します。
特に Next.js 14.2.0 は内部ローダが古く、この Windows 固有エラーが解消されていません。
■ よくある発生条件
- Next.js が 14.2.0 のまま更新されていない
- Windows の絶対パスが直接 import される
- グローバル CSS（globals.css）を経由して loader が衝突
- Node.js 18 初期〜中期の ESM Loader を使用
- Turbopack と Webpack の切替途中
上記が揃うと再現率が非常に高くなります。
■ 解決方法（安定して直る順番）
① Next.js を最新に更新する（最優先）
このエラーは Next 14.2.4 以降 & 15 系 で大幅に解消されています。
npm install next@latest react@latest react-dom@latest
② Node.js を 20 系へ上げる
古い ESM Loader バージョンでは Windows パスが誤判定されやすいです。
推奨：Node 20.11 以上
③ PostCSS / CSS Loader を最新に揃える
css-loader と postcss-loader が古いままだと、Next.js 側と処理順が噛み合いません。
npm install -D postcss@latest autoprefixer@latest css-loader@latest
設定例（postcss.config.js）：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
④ next.config.js の Webpack カスタムを疑う
以下のような独自ルールがあると、Windows パス自体が loader に直接渡されてしまいます。
config.module.rules.push({
test: /\.css$/,
type: 'javascript/auto',
})
これは削除推奨です。
⑤ Turbopack を無効化して Webpack に戻す
Turbopack がエラートリガーになっている場合、切り替えると安定します。
module.exports = {
experimental: { turbo: false }
}
■ 再発防止のポイント
- Windows では VSCode の import 自動補完が
C:\User\...を入れないよう注意 - URL として解釈されないよう、必要なら file URL 化する
- 例：
file:///C:/path/to/project
- 例：
■ 結論
今回のケースは Next.js のバージョン・Node.js のバージョン・CSS ローダの3点が古いまま衝突した典型例 です。
最短で直すには下記3つをまとめて更新するのがもっとも効果的です。
- Next.js
- Node.js
- css-loader / postcss-loader
変更後は npm run build を再度実行すれば、ほぼ確実にビルドが通ります。
