Node.js: Difference between revisions
Malteneuss (talk | contribs) m Add link to buildNpmPackage source code |
Malteneuss (talk | contribs) m Add nextjs google fonts error example |
||
Line 154: | Line 154: | ||
(Inspired by [https://discourse.nixos.org/t/how-to-make-nixos-so-easy-that-people-can-be-productive-up-front-without-having-to-first-learn-the-nix-language/5625 this discussion on discourse.nixos.org]) | (Inspired by [https://discourse.nixos.org/t/how-to-make-nixos-so-easy-that-people-can-be-productive-up-front-without-having-to-first-learn-the-nix-language/5625 this discussion on discourse.nixos.org]) | ||
'''Google-fonts fetch failure with NextJS''' | |||
Nextjs is a popular React framework and comes with built-in support with support for Google fonts. If a NPM project uses it, <syntaxhighlight lang="shell"> | |||
npm run build # which calls "next build" | |||
</syntaxhighlight>will try to fetch and optimize the Google fonts during a nix build run, which will fail in Nix's isolated sandbox without internet:<syntaxhighlight lang="shell"> | |||
... | |||
Running phase: buildPhase | |||
Executing npmBuildHook | |||
> nextjs-ollama-local-ai@0.1.0 build | |||
> next build | |||
▲ Next.js 14.1.0 | |||
Creating an optimized production build ... | |||
request to https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap failed, reason: getaddrinfo EAI_AGAIN fonts.googleapis.com | |||
at ClientRequest.<anonymous> (/build/source/node_modules/next/dist/compiled/node-fetch/index.js:1:66160) | |||
at ClientRequest.emit (node:events:518:28) | |||
at TLSSocket.socketErrorListener (node:_http_client:500:9) | |||
at TLSSocket.emit (node:events:518:28) | |||
at emitErrorNT (node:internal/streams/destroy:169:8) | |||
at emitErrorCloseNT (node:internal/streams/destroy:128:3) | |||
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { | |||
type: 'system', | |||
errno: 'EAI_AGAIN', | |||
code: 'EAI_AGAIN' | |||
} | |||
Failed to compile. | |||
src/app/layout.tsx | |||
`next/font` error: | |||
Failed to fetch `Inter` from Google Fonts. | |||
> Build failed because of webpack errors | |||
ERROR: `npm build` failed | |||
</syntaxhighlight>You have to patch the Javascript code <syntaxhighlight lang="javascript"> | |||
# In layout.tsx file replace | |||
# | |||
# import {Inter} from "next/font/google"; #or any other Google font like Inter | |||
# const inter = Inter({ subsets: ["latin"] }); | |||
# | |||
# with ("src:" must be relative to the src/app/layout.tsx file): | |||
import localFont from "next/font/local"; | |||
const inter = localFont({ src: './Inter.ttf' }); | |||
</syntaxhighlight>and place the Google fonts from Nixpkgs into the project, e.g. in a <code>preConfigurePhase</code>:<syntaxhighlight lang="nix"> | |||
buildNpmPackage { | |||
pname = "myproject"; | |||
version = "1.0.0"; | |||
... | |||
# see https://github.com/NixOS/nixpkgs/blob/master/pkgs/by-name/cr/crabfit-frontend/package.nix | |||
preConfigurePhase = '' | |||
cp "${ | |||
google-fonts.override { fonts = [ "Inter" ]; } | |||
}/share/fonts/truetype/Inter[wght].ttf" src/app/Inter.ttf | |||
''; | |||
... | |||
} | |||
</syntaxhighlight>You can take a look at what fonts are available in the Nix <code>google-fonts</code> package by calling:<syntaxhighlight lang="shell"> | |||
ls -ahl $(nix build --no-link nixpkgs#google-fonts)/share/fonts/truetype/ | |||
</syntaxhighlight> | |||
== Example nix shell for Node.js development == | == Example nix shell for Node.js development == |