はじめに
Cloudflare WorkersでNext.jsを開発しているときにエラーに時間がかかったのでまとめます
問題
npm run preview
をすると以下のエラーが出るようになりました
✘ [ERROR] Error: 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. To fix this error, perform this operation within a handler. https://developers.cloudflare.com/workers/runtime-apis/handlers/
at Js.ge.__chunk_2976
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/5f9c3c5ca34a56d5b98423dc5279b2aa.js:59:15708)
at n
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/files/[id].func.js:1:15438)
at Js.ge.__chunk_6938
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/5f9c3c5ca34a56d5b98423dc5279b2aa.js:1:135163)
at n
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/files/[id].func.js:1:15438)
at Js.ge.__chunk_4389
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/5f9c3c5ca34a56d5b98423dc5279b2aa.js:37:4118)
at n
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/files/[id].func.js:1:15438)
at Js.ge.__chunk_805
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/5f9c3c5ca34a56d5b98423dc5279b2aa.js:77:30985)
at n
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/files/[id].func.js:1:15438)
at Js.ge.__chunk_2823
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/5f9c3c5ca34a56d5b98423dc5279b2aa.js:65:17569)
at n
(file:///home/jinwatanabe/workspace/gigafile-clone-app/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/files/[id].func.js:1:15438)
ページにアクセスすると500エラーになります
シンプルなページにしても起きました
解決方法
Next.jsを14系に変更しまして治りました
15系ではnext-on-pageが対応できていないのかエラーが発生しているようです
おわりに
tailwindcssもnext14に対応する必要がありま