Cloudflare PagesにNext.jsをデプロイできたけどInternal Server Error発生

色々やって何とかデプロイ自体はできたけどInternal Server Errorが発生して表示されない。
runtime edgeで何か起きてそう。

一旦状況整理

調査に使用していたページは2つ
1つ目がメインページでSSRのためruntime edge+asyncを使っていて以下エラー発生。

Disallowed operation called within global scope. Asynchronous I/O (ex: fetch() or connect()), setting a timeout, and generating random values are not allowed within global scope

2つ目がnotFoundページでruntime edgeもasyncも使っていない状態でエラーなし。
試しにruntime edgeを使ってみたところ以下エラー発生。

TypeError: Cannot redefine property: __import_unsupported

notFoundページで使っていたnext/linkのimportを外してみたところ以下エラーが発生。

Disallowed operation called within global scope. Asynchronous I/O (ex: fetch() or connect()), setting a timeout, and generating random values are not allowed within global scope

たつや、

このエラーは、グローバルスコープで fetch() などの非同期処理を実行していることが原因です。
つまり、fetch() や setTimeout() などを関数の外側に記述している場合に発生します。

export const runtime = "edge";

const res = await fetch("https://api.example.com/data"); // ❌ グローバルスコープで実行

export default async function Home() {
  const data = await res.json();
  return <div>{data.title}</div>;
}

とのことだけどこんなコード書いてないんだよなー

たつや、

export const runtime = "edge";

export default function Home() {
  return <div>テストページ</div>;
}

このコードをデプロイしてみてもエラーが発生する
Nextjsのバージョンとかの問題なのか…？

たつや、

rm -rf node_modules package-lock.json
npm install next@14.1.0 react@18.2.0 react-dom@18.2.0

これで15系からダウングレードしたら表示された

たつや、

tailwindcssもダウングレード

npm install -D tailwindcss@3.4.17

これに伴い色々修正した結果globals.cssで何か起きている模様

たつや、

next.config.jsの書き方を修正して

npm install autoprefixer postcss --save-dev

これを実行することですべて解決、表示された

このスクラップは2ヶ月前にクローズされました