How to buildNpmPackage with Nextjs and Google fonts?

Help
1

I’m trying to package a simple web ui frontend GitHub - jakobhoeg/nextjs-ollama-llm-ui: Fully-featured, beautiful web interface for Ollama LLMs - built with NextJS. Deploy with a single click. for ollama and can’t get it to build, because that project uses nextjs, which wants to download Google fonts during the buildphase but fails because of the Nix sandbox:

{ buildNpmPackage, fetchFromGitHub, google-fonts,  ... }:

buildNpmPackage {
  pname = "nextjs-ollama-llm-ui";
  version = "1.0.1";

  src = fetchFromGitHub {
    owner = "jakobhoeg";
    repo = "nextjs-ollama-llm-ui";
    # rev = "v1.0.1";
    rev = "86c407c947ba229e71862a384001ba99a33bfe8d";
    hash = "sha256-pZJgiopm0VGwaZxsNcyRawevvzEcK1j5WhngX1Pn6YE=";
  };
  npmDepsHash = "sha256-ojhp29MPdFQ+caz7afmoh5J1W+dFy0jEKBuZTotbJB4=";

  NEXT_PUBLIC_OLLAMA_URL="http://localhost:11434"
  # see https://github.com/NixOS/nixpkgs/blob/8ee3dcb13c44ec3d72c338a504b08669a0e832f4/pkgs/by-name/cr/crabfit-frontend/package.nix
  preConfigurePhase = ''
    cp "${
      google-fonts.override { fonts = [ "Inter" ]; }
    }/share/fonts/truetype/Inter[wght].ttf" src/app/fonts/Inter.ttf
  '';
}

and i get

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

I tried removing the import of google fonts in this layout.tsx:

import { Inter } from "next/font/google";

but that isn’t sufficient. Any ideas?

2

You need to use next local font. Just copy or symlink the font from nixpkgs into your src folder during build time:

If you control the source code chnage it to use local fonts.

Otherwise you could create a patch file to parch the upstream source to use local fonts

And also make sure to set $HOME to eg. $TMPDIR since nextjs tries to write some cache files.

3

Many thanks, that helped. I’ve added some example to Node.js - NixOS Wiki. Regarding $HOME, buildNpmPackage already sets this variable to $TMPDIR.

1 Like
4

I am facing this issue on next dev, but all the solutions presented rely on building the application first. Is there a solution for dev mode as well?

5

Unfortuneately, i don’t know.

6

@zvictor

Something I commonly like to do:

 pkgs.mkShell {
      shellHook = ''
        # Website fonts
        cp -rf ${pkgs.inter}/share/fonts/opentype/* ${fonts_path}
        chmod -R +w ${fonts_path}
      ''
}

You just need to replace fonts_path with the place of your local website fonts. (i.e. ./src/fonts)

This copies the fonts into your folder if you enter devshell

Also don’t forget to add them to .gitignore

7

Thank you guys!

I am new to NixOS (it’s my first week onboard) and this bug has bothered me because I couldn’t see any reason for its existence. Why is there a network error just in NixOS for apps that run fine elsewhere? It didn’t seem sensible to patch the app if the problem lays in its environment.

I couldn’t find any sign online that this issue has been properly debugged, so I have been trying to do it myself. Here are my findings:

  1. The error is thrown by the node-fetch pkg packed inside next.js. One can’t easily patch it.
  2. node-fetch hides lower-level errors, but with some patching involved we find the lowest level error:
AggregateError [ETIMEDOUT]:
    at internalConnectMultiple (node:net:1117:18)
    at internalConnectMultiple (node:net:1185:5)
    at Timeout.internalConnectMultipleTimeout (node:net:1711:5)
    at listOnTimeout (node:internal/timers:575:11)
    at process.processTimers (node:internal/timers:514:7)
  1. Searching for it we find that it’s related to ipv6.
  2. Disabling ipv6 makes the error disappear. I have tried this:
sudo sysctl -w net.ipv6.conf.all.disable_ipv6=1
sudo sysctl -w net.ipv6.conf.default.disable_ipv6=1
sudo sysctl -w net.ipv6.conf.lo.disable_ipv6=1
8

Now I am left with some questions to you:

  1. can you confirm that disabling ipv6 solves the issue in your installation as well?

  2. if so, what is the right step forward?
    2.1. is our network misconfigured? can we fix that?
    2.2. if disabling ipv6 is the way to go, should I try to do it only in the shell.nix of the projects affected? how can that be done?