Closed max-ch9i closed 1 year ago
The error happens with other fonts such as Roboto
:
https://stackblitz.com/edit/nextjs-xxuvuq?file=app/page.js
It looks like fetchFontFile
function is failing with an error: https://github.com/vercel/next.js/blob/ac0b6d2a719fd6656b555dc398e73c01c71feae4/packages/font/src/google/utils.ts#L258
FetchError: request to https://fonts.gstatic.com/s/notosansjp/v42/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.5.woff2 failed, reason: read ECONNRESET
at ClientRequest.<anonymous> (/path/to/node_modules/next/dist/compiled/node-fetch/index.js:1:65756)
at ClientRequest.emit (node:events:513:28)
at ClientRequest.emit (node:domain:489:12)
at TLSSocket.socketErrorListener (node:_http_client:494:9)
at TLSSocket.emit (node:events:513:28)
at TLSSocket.emit (node:domain:489:12)
at emitErrorNT (node:internal/streams/destroy:151:8)
at emitErrorCloseNT (node:internal/streams/destroy:116:3)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
type: 'system',
errno: 'ECONNRESET',
code: 'ECONNRESET'
}
I can access the URL via the browser/curl, so I think it's not the internet connection issue.
Have the same issue with default create-next-app skeleton.
event - compiled client and server successfully in 745 ms (195 modules)
Error [NextFontError]: Failed to fetch `Inter` from Google Fonts.
at nextFontError (/Users/bazhenov/Developer/foo/my-app/node_modules/@next/font/dist/utils.js:55:17)
at downloadGoogleFonts (/Users/bazhenov/Developer/foo/my-app/node_modules/@next/font/dist/google/loader.js:87:39)
at /Users/bazhenov/Developer/foo/my-app/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:52:99
at async Span.traceAsyncFn (/Users/bazhenov/Developer/foo/my-app/node_modules/next/dist/trace/trace.js:79:20)
error - Failed to download `Inter` from Google Fonts. Using fallback font instead.
Seems like a SSL related error. Running npx next dev
/npx next build
with NODE_TLS_REJECT_UNAUTHORIZED=0
, but you should use it at your own risk. It's effectively disable SSL certificate validation ⚠️.
Hey @max-ch9i, did you get any workaround I'm also facing the same error.
@Shahzad6077 I just added font <link/>
s into <head/>
as instructed by Google Fonts.
Another workaround is downloading the fonts manually and using @next/font/local
.
Yes I have downloaded the fonts locally and use @next/font/local
but the font files are approx 27mb 😂
CSS files provided by Google Fonts (https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap) have woff2 files split by unicode ranges. Downloading otf files and using @next/font/local
is not an option for CJK.
Removing the .next
directory fixed the problem for me.
Hmm. The problem still occurs for me after removing .next
.
Removing .next
directory didn't fix it for me. Fails with 13.2.2-canary.1
and the new built-in font package.
I've stumbled on this issue again after updating next
to 13.2.3
, and removing .next
did fix the problem.
Here is my code, which, I suspect, should not be too different from anyone still having the problem:
import { Noto_Sans_JP } from "next/font/google";
const noto = Noto_Sans_JP({
weight: ["400", "700"],
preload: false, // https://github.com/vercel/next.js/pull/44594
});
So the other files than _app.tsx
might be affecting I guess?
Strange, just a few days after I got the error, I didn't change anything (perhaps removed the .next
folder again) but now the error is gone.
Nvm: error is back.
I still have an issue :| Next 13.2.1
const roboto = Roboto({
weight: ['300', '500', '700', '900'],
subsets: ['latin'],
});
I have the same issue on: 13.2.4
Same on 13.2.3
import { Inter, Yeseva_One } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
});
const yeseva_one = Yeseva_One({
subsets: ["latin"],
variable: "--font-yeseva-one",
weight: ["400"],
});
And when I run npm run build
:
Failed to compile.
src/pages/_app.js
`next/font` error:
Failed to fetch `Inter` from Google Fonts.
src/pages/_app.js
`next/font` error:
Failed to fetch `Yeseva One` from Google Fonts.
Mmm... maybe it's a issue with the node version? When running npm run dev
after removing the .next
folder, I get this error:
ReferenceError: AbortController is not defined
Looking for AbortController, I've found that node includes it since 15.0.0
and I'm using 14.21.1
. Which version are you all using?
Which version are you all using?
I am on 18.3.0
. Seems like an SSL error as bazhenov said, as NODE_TLS_REJECT_UNAUTHORIZED=0
is the only thing that helps
Edit: for some reason, error is back - even with the flag (which still helps in npm run build
tho)
Which version are you all using?
I am on
18.3.0
. Seems like an SSL error as bazhenov said, asNODE_TLS_REJECT_UNAUTHORIZED=0
is the only thing that helps
Well, for me NODE_TLS_REJECT_UNAUTHORIZED=0
doesn't work, I get the same ReferenceError: AbortController is not defined
.
Maybe there are two errors here 🤷
Ups. I'm receiving this error again, but now deploying to Vercel.
import { Noto_Sans_Mono, Work_Sans } from "next/font/google";
const notoSansMono = Noto_Sans_Mono({
subsets: ["latin"],
variable: "--font-noto-sans-mono",
});
const workSans = Work_Sans({
subsets: ["latin"],
variable: "--font-work-sans",
});
ReferenceError: AbortController is not defined
08:48:15.480 | at fetchCSSFromGoogleFonts (/vercel/path0/node_modules/next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js:34:28)
08:48:15.481 | at nextFontGoogleFontLoader (/vercel/path0/node_modules/next/dist/compiled/@next/font/dist/google/loader.js:76:79)
08:48:15.481 | at /vercel/path0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:72:99
08:48:15.481 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
08:48:15.482 | ReferenceError: AbortController is not defined
08:48:15.482 | at fetchCSSFromGoogleFonts (/vercel/path0/node_modules/next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js:34:28)
08:48:15.482 | at nextFontGoogleFontLoader (/vercel/path0/node_modules/next/dist/compiled/@next/font/dist/google/loader.js:76:79)
08:48:15.482 | at /vercel/path0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:72:99
08:48:15.482 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
08:48:21.104 | Failed to compile.
08:48:21.105 |
08:48:21.105 | pages/_app.js
08:48:21.105 | `next/font` error:
08:48:21.105 | Failed to fetch `Noto Sans Mono` from Google Fonts.
08:48:21.106 |
08:48:21.106 | pages/_app.js
08:48:21.106 | `next/font` error:
08:48:21.106 | Failed to fetch `Work Sans` from Google Fonts.
@emmgfx are you using Node v14 by any chance? It was happening for us till yesterday. I tried with Node v16 and it worked like a charm!
@emmgfx are you using Node v14 by any chance? It was happening for us till yesterday. I tried with Node v16 and it worked like a charm!
As I mentioned here, in my local I have node 14.21.1
(which apparently doesn't includes AbortController), but I think it's not the only error, because for me also fails when deploying to Vercel, and I can assume that they're using a node version compatible with his own product :P
As mentioned upgrading node version then removing .next
folder. Fixed the issue for me.
Mmm... maybe it's a issue with the node version? When running
npm run dev
after removing the.next
folder, I get this error:ReferenceError: AbortController is not defined
Looking for AbortController, I've found that node includes it since
15.0.0
and I'm using14.21.1
. Which version are you all using?
Bingo! My code editor reverted back to an old version. running nvm use --lts
resolved the issue.
upgrading node and removing .next did not work to me. Neither using lts. I only have this problem while running export
not in dev
or build
alone
Upgrading the node version higher than 14 solved my problem.
Upgrading the node version higher than 14 solved my problem.
I was running v18 and this was happening as well, so I wouldn't advise upgrading too far up until this is fixed. I'm now using v14 and the problem is gone.
Upgrading the node version higher than 14 solved my problem.
I was running v18 and this was happening as well, so I wouldn't advise upgrading too far up until this is fixed. I'm now using v14 and the problem is gone.
For me, I was using v14 and then I changed it to v16. It has solved my problem.
Can confirm. After updating from 13.2.3
to 13.2.4
the build breaks on vercel:
Same error as in https://github.com/vercel/next.js/issues/45080#issuecomment-1467584677
The issue was fixed with updating from 14.x to 18.x (16.x also works)
Here is my code:
import {Inter} from "next/font/google";
const inter = Inter({
display: "swap",
subsets: ["latin"],
variable: '--font-inter',
})
For anyone facing the issue on vercel make sure the Node Version is set to a newer version than 14.x (like 16.x and 18.x) in the project settings:
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,
})
there is abortController in fetch-font-file. in dev mode it use timeout 3000. consider more timeout or none?
Upgrading Node version 14.x
to 18.x
inside the Vercel's Settings > Node.js Version
fixed this for me.
I've upgraded Node to 18.x by Nvm, it worked.
I had the same problem with node v16.19.0, deleting the .next
folder solved it. I didn't upgrade the node version.
I have the same problem with node v18.12.1, next 13.1.5, @next/font: 13.1.5.
deleting .next
folder not work for me.
I have the same problem with node v18.12.1, next 13.1.5, @next/font: 13.1.5. deleting
.next
folder not work for me.
Can you update your Next? Since 13.2 I think that @next/font
isn't required, you should use next/font
. Check this.
Had this issue in development and deployment.
After going through this thread I downgraded from node 18 to 16 and it did in fact work.
for deployment - on vercel project, settings -->general --> node.js version
make sure to save and then redepoly the project.
I was also struggling with this issue recently. In my case, the error was:
AbortError: The user aborted a request.
at abort (/Users/martin/Local/.../node_modules/next/dist/compiled/node-fetch/index.js:1:65190)
at EventTarget.abortAndFinalize (/Users/martin/Local/.../node_modules/next/dist/compiled/node-fetch/index.js:1:65410)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:737:20)
at EventTarget.dispatchEvent (node:internal/event_target:679:26)
at abortSignal (node:internal/abort_controller:314:10)
at AbortController.abort (node:internal/abort_controller:344:5)
at Timeout.<anonymous> (/Users/martin/Local/.../node_modules/next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js:35:55)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7) {
type: 'aborted'
}
AbortError: The user aborted a request.
at abort (/Users/martin/Local/.../node_modules/next/dist/compiled/node-fetch/index.js:1:65190)
at EventTarget.abortAndFinalize (/Users/martin/Local/.../node_modules/next/dist/compiled/node-fetch/index.js:1:65410)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:737:20)
at EventTarget.dispatchEvent (node:internal/event_target:679:26)
at abortSignal (node:internal/abort_controller:314:10)
at AbortController.abort (node:internal/abort_controller:344:5)
at Timeout.<anonymous> (/Users/martin/Local/.../node_modules/next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js:35:55)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7) {
type: 'aborted'
}
error - Failed to download `Raleway` from Google Fonts. Using fallback font instead.
error - Failed to download `Poppins` from Google Fonts. Using fallback font instead.
This started to occur on next version >= 13.2.4. In my case, downgrading to next 13.2.3 solved the issue. Removing .next
folder or using different version of node
did not help. Not sure what is the root cause of this, however hopefully it will be resolved in later versions of nextjs.
I had a similar issue, I can't remember because I've been working on a React native module recently, but I think it was because I had @next/font installed and using it. Migrating to next/font as recommended by next seems to have fixed it. At least for now.
error - Failed to download `Noto Sans KR` from Google Fonts. Using fallback font instead.
event - compiled client and server successfully in 5.1s (194 modules)
warn - Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `npx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font
$ npx @next/codemod@latest built-in-next-font . --force [2:01:17]
WARNING: Git directory is not clean. Forcibly continuing.
Executing command: jscodeshift --verbose=2 --ignore-pattern=**/node_modules/** --ignore-pattern=**/.next/** --extensions=tsx,ts,jsx,js --transform ~/.npm/_npx/04c93779852ad6b7/node_modules/@next/codemod/transforms/built-in-next-font.js .
Processing 53 files...
Spawning 7 workers...
Sending 8 files to free worker...
NOC global.d.ts
NOC env.d.ts
NOC jest.config.ts
NOC next-sitemap.config.js
NOC postcss.config.js
NOC jest.setup.ts
NOC next-env.d.ts
NOC next.config.js
All done.
Results:
0 errors
52 unmodified
0 skipped
1 ok
Uninstalling `@next/font`
yarn remove v1.22.19
[1/2] 🗑 Removing module @next/font...
[2/2] 🔨 Regenerating lockfile and installing missing dependencies...
[#################################################################################################----------------------] 637/779
And It's Solved the Error!
I had the Failed to download "Open Sans" from Google Fonts. Using fallback font instead.
error. Used nvm
to use Node 18 instead of 14, deleted .next
, and this solved the issue.
I was getting the same error, you just need to update your node version to lts or 15+ and delete .next folder.
I am getting the Same Error on NodeJS v18.16.0 (LTS) with Next.js v13.3.1
The error looks intermittent so might not be permanently fixed for anyone. Could be some rate limiting or timeout.
I had the same issue and after I've updated nextjs to the latest version (13.3.4) I get rid of this error. I'm mentioning that I'm using node v 18.14.0
The same error occurred.
npx create-next-app ↓ error - Failed to download
Inter
from Google Fonts.
node -v v18.16.0 next.js -v 13.3.4 Windows10 powershell
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, })
there is abortController in fetch-font-file. in dev mode it use timeout 3000. consider more timeout or none?
https://github.com/vercel/next.js/issues/45080#issuecomment-1485398172 Looks like this is the cause🤔
After I directly modified the timeout from original 3000
to sufficient 30000
in the file noted in the error stack, it could fetch from Google Fonts successfully.
However of course, this is only a temporal solution since you need to edit a file inside node_modules
directly.
IMHO, the original timeout setting (3000
) is too short for especially CJK fonts, which have relatively larger file sizes.
Any improvement towards this would be so appriciated🥺
P.S. Please upvote this idea🙏 https://github.com/vercel/next.js/discussions/47009
AbortError: The user aborted a request.
at abort (/Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/node-fetch/index.js:1:65190)
at EventTarget.abortAndFinalize (/Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/node-fetch/index.js:1:65410)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:735:20)
at EventTarget.dispatchEvent (node:internal/event_target:677:26)
at abortSignal (node:internal/abort_controller:308:10)
at AbortController.abort (node:internal/abort_controller:338:5)
at Timeout.<anonymous> (/Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js:24:51)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7) {
type: 'aborted'
}
error - Failed to download `Noto Sans JP` from Google Fonts. Using fallback font instead.
In my case, I have editted /Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js
as shown in the followind code:
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 30000); // Originally 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,
})
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
Binaries:
Node: 18.14.1
npm: 9.3.1
Yarn: 3.3.0
pnpm: 7.29.3
Relevant packages:
next: 13.3.4
eslint-config-next: 13.3.4
react: 18.2.0
react-dom: 18.2.0
Of all the hypotheses that have come out of the discussion here, this is the one that makes the most sense to me. I was wondering why only cjk fonts kept throwing errors and exceptions with Next.js font support, while in my deployment environment the desired fonts were being applied without any issues. Perhaps it's only in the development environment that the fetch font method takes a timeout to avoid consuming unnecessary resources. I'm all for this idea.👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
@AndrewDongminYoo there have been reports on non-CJK fonts and not just running dev
. How do we configure isDev
? The only
factor likely depends on a lot of things e.g. how long Google takes to respond also.
AFAIK, according to previous comments, it seems like there are two factors:
next build
and next dev
)This one makes both next dev
and next build
fail no matter what fonts you were going to fetch.
Supposedly the one the OP had been facing and reported in this issue.
BTW, I could not reproduce this error in my environment🥲
event - compiled client and server successfully in 745 ms (195 modules)
Error [NextFontError]: Failed to fetch `Inter` from Google Fonts.
at nextFontError (/Users/bazhenov/Developer/foo/my-app/node_modules/@next/font/dist/utils.js:55:17)
at downloadGoogleFonts (/Users/bazhenov/Developer/foo/my-app/node_modules/@next/font/dist/google/loader.js:87:39)
at /Users/bazhenov/Developer/foo/my-app/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:52:99
at async Span.traceAsyncFn (/Users/bazhenov/Developer/foo/my-app/node_modules/next/dist/trace/trace.js:79:20)
error - Failed to download `Inter` from Google Fonts. Using fallback font instead.
Refer: https://github.com/vercel/next.js/issues/45080#issuecomment-1404686930
Seems like a SSL related error. Running npx next dev/npx next build with NODE_TLS_REJECT_UNAUTHORIZED=0, but you should use it at your own risk. It's effectively disable SSL certificate validation ⚠️.
timeout
Issue (only for next dev
)As I commented previously https://github.com/vercel/next.js/issues/45080#issuecomment-1535150448 , this one is caused by short timeout
that is set for dev environment, which had been implemented at https://github.com/vercel/next.js/pull/46834 merged in Next.js release v13.2.4.
AbortError: The user aborted a request.
at abort (/Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/node-fetch/index.js:1:65190)
at EventTarget.abortAndFinalize (/Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/node-fetch/index.js:1:65410)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:735:20)
at EventTarget.dispatchEvent (node:internal/event_target:677:26)
at abortSignal (node:internal/abort_controller:308:10)
at AbortController.abort (node:internal/abort_controller:338:5)
at Timeout.<anonymous> (/Users/ReoHakase/repos/nitic-astronomy/node_modules/.pnpm/next@13.3.4_@babel+core@7.21.4_react-dom@18.2.0_react@18.2.0_sass@1.62.1/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js:24:51)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7) {
type: 'aborted'
}
error - Failed to download `Noto Sans JP` from Google Fonts. Using fallback font instead.
Therefore, it is more likely to happen for relatively larger CJK fonts and only in next dev
.
Either direct modification to the script file
const timeoutId = setTimeout(() => controller.abort(), 30000); // Originally 3000
or downgrading to v13.2.3 or more previous versions might help. (I am not sure about this one)
(This was the cause for me)
A remoção do
.next
diretório corrigiu o problema para mim.
for me it solved
obs: "next": "13.4.1",
for me, this worked
upgraded node to the latest stable version v18.16.0
and deleted the .next
folder.
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
Font optimization (@next/font)
Link to the code that reproduces this issue
https://stackblitz.com/edit/nextjs-qcjltu?file=app%2Fpage.js,package.json
To Reproduce
To reproduce, run
npm run build
.Describe the Bug
Font input is
results in
Possibly related to https://github.com/vercel/next.js/pull/44594 and https://github.com/vercel/next.js/commit/5f2c9d0b301588cec60c3bfb6b36cb7ece787659
Expected Behavior
Compiles successfully.