エラー概要
Next.js App Routerでyarn devしたら下記のエラー、WebFontが読み込めない。
AbortError: The user aborted a request.
at abort (/Users/tomioka.tsukasa/Documents/env/portfolio_ver4/node_modules/next/dist/compiled/node-fetch/index.js:1:65594)
at EventTarget.abortAndFinalize (/Users/tomioka.tsukasa/Documents/env/portfolio_ver4/node_modules/next/dist/compiled/node-fetch/index.js:1:65814)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:825:20)
at EventTarget.dispatchEvent (node:internal/event_target:760:26)
at abortSignal (node:internal/abort_controller:370:10)
at AbortController.abort (node:internal/abort_controller:392:5)
at Timeout.<anonymous> (/Users/tomioka.tsukasa/Documents/env/portfolio_ver4/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js:26:55)
at listOnTimeout (node:internal/timers:573:17)
at process.processTimers (node:internal/timers:514:7) {
type: 'aborted'
}
初めに下記が連続して出力された後に、上記のAbortedErrorが吐かれる。
Retrying 1/3...
The user aborted a request.
Retrying 1/3...
環境
- "next": "14.2.5"
- yarn: 1.22.22
解決策
下記を試してみる。
- Cleared browser cache
- yarn cache clean
- deleted .next directory
- deleted node_modules
- re-ran and built everything
- restarted computer
- disabled vpn
None of those things worked.
My specs are:
- next js 14.1.0
- ubuntu 23.04
next/font/google AbortError: The user aborted a request #55734
上記のイシューを読んでいって、.nextディレクトリを削除した後に再度ローカルを立ち上げると改善したという人がいる。筆者は下記全て試してもダメだったので、一旦フォールバックの代替フォントが適用されているので、そのまま開発を進めた。
この現象が起きている人の共通項としてローカル環境だけで起きていて、本番環境だと問題ないとのこと。
エラー原因（色々調べたが未だ解明できていない...）
筆者は、WebFont読み込み失敗問題が時々起きます。下記の事象から、ネットワークに何か問題があってGoogleからレスポンスを得られないのではないかと考えています。
- 日によって場所（ネットワーク環境）を変えて開発をしている
.nextを削除するとエラーが解消される人もいる（.nextディレクトリ内のキャッシュがクリアされたから解消されている？）- VPN接続は切断した後にエラー解消される人もいる
また、AbordError自体もきちんと理解しておく。
abort() は AbortController インターフェイスのメソッドで、非同期操作を完了前に中止します。 これはフェッチリクエスト、あらゆるレスポンス本体の消費、ストリームを中止することができます。
fetchリクエスト等をこのまま継続するとパフォーマンス等に悪影響が出る場合に、条件分岐で非同期操作を中止する。
AbordErrorを出したnode_modules内のソースコードを確認する。（/Users/***/Documents/env/portfolio_ver4/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js）
/**
* Fetch the url and return a buffer with the font file.
*/
async function fetchFontFile(url, isDev) {
// Check if we're using mocked data
if (process.env.NEXT_FONT_GOOGLE_MOCKED_RESPONSES) {
// If it's an absolute path, read the file from the filesystem
if (url.startsWith('/')) {
return require('fs').readFileSync(url);
}
// Otherwise just return a unique buffer
return Buffer.from(url);
}
return await (0, retry_1.retry)(async () => {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 3000);
const arrayBuffer = await (0, node_fetch_1.default)(url, {
agent: (0, get_proxy_agent_1.getProxyAgent)(),
// Add a timeout in dev
signal: isDev ? controller.signal : undefined,
})
.then((r) => r.arrayBuffer())
.finally(() => {
clearTimeout(timeoutId);
});
return Buffer.from(arrayBuffer);
}, 3);
}
exports.fetchFontFile = fetchFontFile;
初めのif文が成功せず、setTimeoutで3000ms経ったからAbordErrorを吐くようにしているよう。兎にも角にも、ネットワーク関連の問題でGoogle Web Fontsへのリクエストが失敗しているのだろう...。
立ち上げ時にいちいちAbordErrorを待たないといけないので多少なりとも開発に影響が出る...解決したい...