Node.js: Difference between revisions

(6 intermediate revisions by 6 users not shown)

Line 1:

__TOC__

[https://nodejs.org Node.js] is an open-source, cross-platform JavaScript runtime environment that allows developers to execute JavaScript code on the server side. Built on the V8 JavaScript engine, it enables the creation of scalable and high-performance applications, particularly for real-time web services.

[https://nodejs.org Node.js] is an open-source, cross-platform [[JavaScript]] runtime environment that allows developers to execute JavaScript code on the server side. Built on the V8 JavaScript engine, it enables the creation of scalable and high-performance applications, particularly for real-time web services.

== Setup ==

Line 9:

See <code>nix search nixpkgs nodejs</code> for additional versions like <code>nodejs-12_x</code>, etc.

== Packaging ==

=== Packaging with <code>buildNpmPackage</code> ===

From the [https://nixos.org/manual/nixpkgs/stable/#javascript-tool-specific Nixpkgs manual]: "<code>buildNpmPackage</code> allows you to package npm-based projects in Nixpkgs without the use of an auto-generated dependencies file (as used in node2nix). It works by utilizing npm’s cache functionality – creating a reproducible cache that contains the dependencies of a project, and pointing npm to it."

To better understand what happens under the hood and see the latest features [https://github.com/NixOS/nixpkgs/blob/master/pkgs/build-support/node/build-npm-package/default.nix see the build-npm-package source].

Here's a <code>flake.nix</code> example to build a node package from the current directory.

{

inputs = {

nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";

};

outputs = {

self,

nixpkgs,

}: let

pkgs = nixpkgs.legacyPackages."x86_64-linux";

in {

packages."x86_64-linux".default = pkgs.buildNpmPackage {

pname = "my-node-script";

version = "0.1.0";

src = ./.;

npmDepsHash = "sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=";

};

}

</syntaxhighlight>

By default, the build phase runs the <code>build</code> script defined in <code>package.json</code>.

{

"scripts": {

"build": "npm install"

}

</syntaxhighlight>

The binaries created in this package are defined by the <code>bin</code> key in <code>package.json</code>. This example will result in a <code>my-node-script</code> binary being created that basically runs <code>node main.js</code>.

{

"bin": {

"my-node-script": "main.js"

}

</syntaxhighlight>

==== Packaging electron applications ====

When trying to <code>npm i</code> electron, by default electron will try to download binaries from the internet, which does not work in the Nix sandbox. To stop it from trying to access the internet, set the environment variable <code>ELECTRON_SKIP_BINARY_DOWNLOAD = "1";</code>.

For examples of packaging electron applications, search [https://github.com/search?q=buildNpmPackage+electron+repo%3ANixOS%2Fnixpkgs&type=code&l=NixOS%2Fnixpkgs Nixpkgs] for the terms "buildNpmPackage" and "electron".

=== Packaging with <code>yarn2nix</code> ===

yarn2nix uses the yarn nodejs tool to create a file called yarn.lock, which in return can be used by yarn2nix to generate a usable yarn expression.

This is what was needed to convert a small application server [https://git.shackspace.de/rz/muellshack/tree/3be09715911628b164fa1cf346387555ca26a5b1 shackspace muellshack]:

$ nix-shell -p yarn yarn2nix

$ yarn install # creates yarn.lock

$ yarn2nix > yarn.nix

$ vim package.json # add: "bin": "app.js",

$ cat > default.nix <<EOF

with (import <nixpkgs> {});

rec {

muellshack = mkYarnPackage {

name = "muellshack";

src = ./.;

packageJSON = ./package.json;

yarnLock = ./yarn.lock;

yarnNix = ./yarn.nix;

};

}

EOF

$ sed -i '1i#!/usr/bin/env node' app.js

$ chmod +x app.js

$ nix-build

$ result/bin/muellshack

</syntaxhighlight>

The complete diff can be found at [https://git.shackspace.de/rz/muellshack/commit/f5e498acd47695c4947dc1b5ddebfad2eee8d653 the respective diff]

== Troubleshooting ==

Line 37:

Line 123:

This is done through configuring npm and amending your <tt>PATH</tt>.<ref>[https://logs.nix.samueldr.com/nixos/2018-07-09#1358500 joepie91 on #nixos, 2018-07-09]</ref>

<~~pre~~>

$ npm set prefix ~/.npm-global

</~~pre~~>

</syntaxhighlight>

Then, amend your <tt>PATH</tt> so it looks into <tt>$HOME/.npm-global</tt>.

Line 47:

Line 133:

This is a bit harder to implement, but creates a bit more strictness in your environment; it will be impossible accidentally make use of what would have been a globally installed package. The idea is to install it to either a temporary transitory folder or to the project folder, then run the locally installed instance of the package, the binaries are found under <tt>node_packages/.bin/</tt>.<ref>[https://logs.nix.samueldr.com/nixos/2018-07-17#1386090; samueldr on #nixos, 2018-07-17]</ref>

<~~pre~~>

$ npm install uglify-es

[ ... ]

$ ls -l node_modules/.bin/

total 0

lrwxrwxrwx 1 user users 25 Jul 17 15:34 uglifyjs -> ../uglify-es/bin/uglifyjs

$ node_modules/.bin/uglifyjs --help

Usage: uglifyjs [options] [files...]

</~~pre~~>

</syntaxhighlight>

===== direnv =====

Line 71:

Line 157:

==== Using <code>npx</code> ====

<~~pre~~>

$ nix-shell -p nodejs-8_x

$ npx create-react-app --help

npx: installed 67 in 1.671s

Usage: create-react-app <project-directory> [options]

[...]

</~~pre~~>

</syntaxhighlight>

==== Using <code>npx</code> with binaries ====

Line 87:

Line 173:

For example, <code>npx cypress open</code> might give an error like:

<~~pre~~>

$ npx cypress open

Line 97:

Line 183:

----------

spawn /home/rkb/.cache/Cypress/4.10.0/Cypress/Cypress ENOENT

</~~pre~~>

</syntaxhighlight>

One quick workaround for this is [[Steam#FHS environment only| to use <code>steam-run</code>]] to provide a placeholder FHS environment that *should* work; e.g. for the Cypress example above:

<~~pre~~>

$ nix-env -iA nixos.steam-run

Line 107:

Line 193:

-- Cypress opens successfully!

</~~pre~~>

</syntaxhighlight>

(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])

Line 113:

Line 199:

'''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~~">

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="console">

npm run build # which calls "next build"

$ 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">

...

Line 148:

Line 234:

ERROR: `npm build` failed

</syntaxhighlight>You have to patch the Javascript code <syntaxhighlight lang="javascript">

# In layout.tsx file replace

// In layout.tsx file replace

#

//

# import {Inter} from "next/font/google"; #or any other Google font like Inter

// import {Inter} from "next/font/google"; // or any other Google font like Inter

# const inter = Inter({ subsets: ["latin"] });

// const inter = Inter({ subsets: ["latin"] });

#

//

# with ("src:" must be relative to the src/app/layout.tsx file):

// with ("src:" must be relative to the src/app/layout.tsx file):

import localFont from "next/font/local";

const inter = localFont({ src: './Inter.ttf' });

Line 171:

Line 257:

...

}

</syntaxhighlight>You can take a look at what fonts are available in the Nix <code>google-fonts</code> package by calling:<syntaxhighlight lang="~~shell~~">

</syntaxhighlight>You can take a look at what fonts are available in the Nix <code>google-fonts</code> package by calling:<syntaxhighlight lang="console">

ls -ahl $(nix build --no-link --print-out-paths nixpkgs#google-fonts)/share/fonts/truetype/

$ ls -ahl $(nix build --no-link --print-out-paths nixpkgs#google-fonts)/share/fonts/truetype/

</syntaxhighlight>Take a look at https://github.com/NixOS/nixpkgs/blob/~~master~~/pkgs/~~servers~~/homepage-dashboard/~~default~~.nix for further workarounds for Nextjs in Nix.

</syntaxhighlight>Take a look at [https://github.com/NixOS/nixpkgs/blob/8358fd43a66594d8b3445d87006185fa76d4be6e/pkgs/by-name/ho/homepage-dashboard/package.nix homepage-dashboard package in nixpkgs] for further workarounds for Nextjs in Nix.

== Tips and tricks ==

~~=== Packaging with <code>buildNpmPackage</code> ===~~

From the [https://nixos.org/manual/nixpkgs/stable/#javascript-tool-specific Nixpkgs manual]: "<code>buildNpmPackage</code> allows you to package npm-based projects in Nixpkgs without the use of an auto-generated dependencies file (as used in node2nix). It works by utilizing npm’s cache functionality – creating a reproducible cache that contains the dependencies of a project, and pointing npm to it."

~~'''To better understand what happens under the hood and see the latest features see'''~~

~~https://github.com/NixOS/nixpkgs/blob/master/pkgs/build-support/node/build-npm-package/default.nix~~

~~==== Packaging electron applications ====~~

When trying to <code>npm i</code> electron, by default electron will try to download binaries from the internet, which does not work in the Nix sandbox. To stop it from trying to access the internet, set the environment variable <code>ELECTRON_SKIP_BINARY_DOWNLOAD = "1";</code>.

For examples of packaging electron applications, search [https://github.com/search?q=buildNpmPackage+electron+repo%3ANixOS%2Fnixpkgs&type=code&l=NixOS%2Fnixpkgs Nixpkgs] for the terms "buildNpmPackage" and "electron".

~~=== Packaging with <code>yarn2nix</code> ===~~

~~yarn2nix uses the yarn nodejs tool to create a file called yarn.lock, which in return can be used by yarn2nix to generate a usable yarn expression.~~

~~This is what was needed to convert a small application server [https://git.shackspace.de/rz/muellshack/tree/3be09715911628b164fa1cf346387555ca26a5b1 shackspace muellshack]:~~

~~<syntaxHighlight lang=console>~~

~~$ nix-shell -p yarn yarn2nix~~

~~$ yarn install~~

~~# creates yarn.lock~~

~~$ yarn2nix > yarn.nix~~

~~$ vim package.json~~

~~# add: "bin": "app.js",~~

~~$ cat > default.nix <<EOF~~

~~with (import <nixpkgs> {});~~

~~rec {~~

~~muellshack = mkYarnPackage {~~

~~name = "muellshack";~~

~~src = ./.;~~

~~packageJSON = ./package.json;~~

~~yarnLock = ./yarn.lock;~~

~~yarnNix = ./yarn.nix;~~

};

}

~~EOF~~

~~$ sed -i '1i#!/usr/bin/env node' app.js~~

~~$ chmod +x app.js~~

~~$ nix-build~~

~~$ result/bin/muellshack~~

~~</syntaxHighlight>~~

~~The complete diff can be found at [https://git.shackspace.de/rz/muellshack/commit/f5e498acd47695c4947dc1b5ddebfad2eee8d653 the respective diff]~~

=== Example nix flake shell for Node.js development ===

`flake.nix~~` example:~~

[[Flake]] example: (Note: the `${&lt;nixpkgs&gt;}` needs to be replaced by `${<nixpkgs>}`

<~~syntaxhighlight lang="nix~~>

{{file|flake.nix|nix|

{

description = "example-node-js-flake";

Line 259:

Line 303:

}

</~~syntaxhighlight~~>

</nowiki>

}}

=== Using nodePackages with a different node version ===

Line 265:

Line 310:

final: prev: {

nodejs = prev.nodejs-16_x;

}

</syntaxhighlight>

<~~pre~~>

$ pnpm node --version

v16.17.1

</~~pre~~>

</syntaxhighlight>

=== Override NodeJS package ===

Line 309:

Line 354:

=== References ===

[[Category:JavaScript]]

@@ Line 1: / Line 1: @@
 __TOC__
-[https://nodejs.org Node.js] is an open-source, cross-platform JavaScript runtime environment that allows developers to execute JavaScript code on the server side. Built on the V8 JavaScript engine, it enables the creation of scalable and high-performance applications, particularly for real-time web services.
+[https://nodejs.org Node.js] is an open-source, cross-platform [[JavaScript]] runtime environment that allows developers to execute JavaScript code on the server side. Built on the V8 JavaScript engine, it enables the creation of scalable and high-performance applications, particularly for real-time web services.
 == Setup ==
@@ Line 9: / Line 9: @@
 See <code>nix search nixpkgs nodejs</code> for additional versions like <code>nodejs-12_x</code>, etc.
+== Packaging ==
+=== Packaging with <code>buildNpmPackage</code> ===
+From the [https://nixos.org/manual/nixpkgs/stable/#javascript-tool-specific Nixpkgs manual]: "<code>buildNpmPackage</code> allows you to package npm-based projects in Nixpkgs without the use of an auto-generated dependencies file (as used in node2nix). It works by utilizing npm’s cache functionality – creating a reproducible cache that contains the dependencies of a project, and pointing npm to it."
+To better understand what happens under the hood and see the latest features [https://github.com/NixOS/nixpkgs/blob/master/pkgs/build-support/node/build-npm-package/default.nix see the build-npm-package source].
+Here's a <code>flake.nix</code> example to build a node package from the current directory.
+<syntaxhighlight lang="nix">
+{
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable";
+  };
+  outputs = {
+    self,
+    nixpkgs,
+  }: let
+    pkgs = nixpkgs.legacyPackages."x86_64-linux";
+  in {
+    packages."x86_64-linux".default = pkgs.buildNpmPackage {
+      pname = "my-node-script";
+      version = "0.1.0";
+      src = ./.;
+      npmDepsHash = "sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=";
+    };
+  };
+}
+</syntaxhighlight>
+By default, the build phase runs the <code>build</code> script defined in <code>package.json</code>.
+<syntaxhighlight lang="json">
+{
+  "scripts": {
+    "build": "npm install"
+  }
+}
+</syntaxhighlight>
+The binaries created in this package are defined by the <code>bin</code> key in <code>package.json</code>. This example will result in a <code>my-node-script</code> binary being created that basically runs <code>node main.js</code>.
+<syntaxhighlight lang="json">
+{
+  "bin": {
+    "my-node-script": "main.js"
+  }
+}
+</syntaxhighlight>
+==== Packaging electron applications ====
+When trying to <code>npm i</code> electron, by default electron will try to download binaries from the internet, which does not work in the Nix sandbox. To stop it from trying to access the internet, set the environment variable <code>ELECTRON_SKIP_BINARY_DOWNLOAD = "1";</code>.
+For examples of packaging electron applications, search [https://github.com/search?q=buildNpmPackage+electron+repo%3ANixOS%2Fnixpkgs&type=code&l=NixOS%2Fnixpkgs Nixpkgs] for the terms "buildNpmPackage" and "electron".
+=== Packaging with <code>yarn2nix</code> ===
+yarn2nix uses the yarn nodejs tool to create a file called yarn.lock, which in return can be used by yarn2nix to generate a usable yarn expression.
+This is what was needed to convert a small application server  [https://git.shackspace.de/rz/muellshack/tree/3be09715911628b164fa1cf346387555ca26a5b1 shackspace muellshack]:
+<syntaxhighlight lang="console">
+$ nix-shell -p yarn yarn2nix
+$ yarn install # creates yarn.lock
+$ yarn2nix > yarn.nix
+$ vim package.json # add:  "bin": "app.js",
+$ cat > default.nix <<EOF
+with (import <nixpkgs> {});
+rec {
+  muellshack = mkYarnPackage {
+    name = "muellshack";
+    src = ./.;
+    packageJSON = ./package.json;
+    yarnLock = ./yarn.lock;
+    yarnNix = ./yarn.nix;
+  };
+}
+EOF
+$ sed -i '1i#!/usr/bin/env node' app.js
+$ chmod +x app.js
+$ nix-build
+$ result/bin/muellshack
+</syntaxhighlight>
+The complete diff can be found at [https://git.shackspace.de/rz/muellshack/commit/f5e498acd47695c4947dc1b5ddebfad2eee8d653 the respective diff]
 == Troubleshooting ==
@@ Line 37: / Line 123: @@
 This is done through configuring npm and amending your <tt>PATH</tt>.<ref>[https://logs.nix.samueldr.com/nixos/2018-07-09#1358500 joepie91 on #nixos, 2018-07-09]</ref>
-<pre>
+<syntaxhighlight lang="console">
- $ npm set prefix ~/.npm-global
+$ npm set prefix ~/.npm-global
-</pre>
+</syntaxhighlight>
 Then, amend your <tt>PATH</tt> so it looks into <tt>$HOME/.npm-global</tt>.
@@ Line 47: / Line 133: @@
 This is a bit harder to implement, but creates a bit more strictness in your environment; it will be impossible accidentally make use of what would have been a globally installed package. The idea is to install it to either a temporary transitory folder or to the project folder, then run the locally installed instance of the package, the binaries are found under <tt>node_packages/.bin/</tt>.<ref>[https://logs.nix.samueldr.com/nixos/2018-07-17#1386090; samueldr on #nixos, 2018-07-17]</ref>
-<pre>
+<syntaxhighlight lang="console">
- $ npm install uglify-es
+$ npm install uglify-es
 [ ... ]
- $ ls -l node_modules/.bin/
+$ ls -l node_modules/.bin/
 total 0
 lrwxrwxrwx 1 user users 25 Jul 17 15:34 uglifyjs -> ../uglify-es/bin/uglifyjs
- $ node_modules/.bin/uglifyjs --help
+$ node_modules/.bin/uglifyjs --help
    Usage: uglifyjs [options] [files...]
-</pre>
+</syntaxhighlight>
 ===== direnv =====
@@ Line 71: / Line 157: @@
 ==== Using <code>npx</code> ====
-<pre>
+<syntaxhighlight lang="console">
- $ nix-shell -p nodejs-8_x
+$ nix-shell -p nodejs-8_x
- $ npx create-react-app --help
+$ npx create-react-app --help
 npx: installed 67 in 1.671s
    Usage: create-react-app <project-directory> [options]
 [...]
-</pre>
+</syntaxhighlight>
 ==== Using <code>npx</code> with binaries ====
@@ Line 87: / Line 173: @@
 For example, <code>npx cypress open</code> might give an error like:
-<pre>
+<syntaxhighlight lang="console">
 $ npx cypress open
@@ Line 97: / Line 183: @@
 ----------
 spawn /home/rkb/.cache/Cypress/4.10.0/Cypress/Cypress ENOENT
-</pre>
+</syntaxhighlight>
 One quick workaround for this is [[Steam#FHS environment only| to use <code>steam-run</code>]] to provide a placeholder FHS environment that *should* work; e.g. for the Cypress example above:
-<pre>
+<syntaxhighlight lang="console">
 $ nix-env -iA nixos.steam-run
@@ Line 107: / Line 193: @@
 -- Cypress opens successfully!
-</pre>
+</syntaxhighlight>
 (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])
@@ Line 113: / Line 199: @@
 '''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">
+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="console">
-npm run build # which calls "next build"
+$ 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">
 ...
@@ Line 148: / Line 234: @@
 ERROR: `npm build` failed
 </syntaxhighlight>You have to patch the Javascript code <syntaxhighlight lang="javascript">
-# In layout.tsx file replace
+// In layout.tsx file replace
-#
+//
-# import {Inter} from "next/font/google"; #or any other Google font like Inter
+// import {Inter} from "next/font/google"; // or any other Google font like Inter
-# const inter = Inter({ subsets: ["latin"] });
+// const inter = Inter({ subsets: ["latin"] });
-#
+//
-# with ("src:" must be relative to the src/app/layout.tsx file):
+// with ("src:" must be relative to the src/app/layout.tsx file):
 import localFont from "next/font/local";
 const inter = localFont({ src: './Inter.ttf' });
@@ Line 171: / Line 257: @@
    ...
 }
-</syntaxhighlight>You can take a look at what fonts are available in the Nix <code>google-fonts</code> package by calling:<syntaxhighlight lang="shell">
+</syntaxhighlight>You can take a look at what fonts are available in the Nix <code>google-fonts</code> package by calling:<syntaxhighlight lang="console">
-ls -ahl $(nix build --no-link --print-out-paths nixpkgs#google-fonts)/share/fonts/truetype/
+$ ls -ahl $(nix build --no-link --print-out-paths nixpkgs#google-fonts)/share/fonts/truetype/
-</syntaxhighlight>Take a look at https://github.com/NixOS/nixpkgs/blob/master/pkgs/servers/homepage-dashboard/default.nix for further workarounds for Nextjs in Nix.
+</syntaxhighlight>Take a look at [https://github.com/NixOS/nixpkgs/blob/8358fd43a66594d8b3445d87006185fa76d4be6e/pkgs/by-name/ho/homepage-dashboard/package.nix homepage-dashboard package in nixpkgs] for further workarounds for Nextjs in Nix.
 == Tips and tricks ==
-=== Packaging with <code>buildNpmPackage</code> ===
-From the [https://nixos.org/manual/nixpkgs/stable/#javascript-tool-specific Nixpkgs manual]: "<code>buildNpmPackage</code> allows you to package npm-based projects in Nixpkgs without the use of an auto-generated dependencies file (as used in node2nix). It works by utilizing npm’s cache functionality – creating a reproducible cache that contains the dependencies of a project, and pointing npm to it."
-'''To better understand what happens under the hood and see the latest features see'''
-https://github.com/NixOS/nixpkgs/blob/master/pkgs/build-support/node/build-npm-package/default.nix
-==== Packaging electron applications ====
-When trying to <code>npm i</code> electron, by default electron will try to download binaries from the internet, which does not work in the Nix sandbox. To stop it from trying to access the internet, set the environment variable <code>ELECTRON_SKIP_BINARY_DOWNLOAD = "1";</code>.
-For examples of packaging electron applications, search [https://github.com/search?q=buildNpmPackage+electron+repo%3ANixOS%2Fnixpkgs&type=code&l=NixOS%2Fnixpkgs Nixpkgs] for the terms "buildNpmPackage" and "electron".
-=== Packaging with <code>yarn2nix</code> ===
-yarn2nix uses the yarn nodejs tool to create a file called yarn.lock, which in return can be used by yarn2nix to generate a usable yarn expression.
-This is what was needed to convert a small application server  [https://git.shackspace.de/rz/muellshack/tree/3be09715911628b164fa1cf346387555ca26a5b1 shackspace muellshack]:
-<syntaxHighlight lang=console>
-$ nix-shell -p yarn yarn2nix
-$ yarn install
-# creates yarn.lock
-$ yarn2nix > yarn.nix
-$ vim package.json
-# add:    "bin": "app.js",
-$ cat > default.nix <<EOF
-with (import <nixpkgs> {});
-rec {
-  muellshack = mkYarnPackage {
-    name = "muellshack";
-    src = ./.;
-    packageJSON = ./package.json;
-    yarnLock = ./yarn.lock;
-    yarnNix = ./yarn.nix;
-  };
-}
-EOF
-$ sed -i '1i#!/usr/bin/env node' app.js
-$ chmod +x app.js
-$ nix-build
-$ result/bin/muellshack
-</syntaxHighlight>
-The complete diff can be found at [https://git.shackspace.de/rz/muellshack/commit/f5e498acd47695c4947dc1b5ddebfad2eee8d653 the respective diff]
 === Example nix flake shell for Node.js development ===
-`flake.nix` example:
+[[Flake]] example: (Note: the `${&amp;lt;nixpkgs&amp;gt;}` needs to be replaced by `${<nixpkgs>}`
-<syntaxhighlight lang="nix>
+{{file|flake.nix|nix|
+<nowiki>
 {
    description = "example-node-js-flake";
@@ Line 259: / Line 303: @@
 }
-</syntaxhighlight>
+</nowiki>
+}}
 === Using nodePackages with a different node version ===
@@ Line 265: / Line 310: @@
 <syntaxhighlight lang="nix>
 final: prev: {
-      nodejs = prev.nodejs-16_x;
+  nodejs = prev.nodejs-16_x;
 }
 </syntaxhighlight>
-<pre>
+<syntaxhighlight lang="console">
 $ pnpm node --version
 v16.17.1
-</pre>
+</syntaxhighlight>
 === Override NodeJS package ===
@@ Line 309: / Line 354: @@
 === References ===
+[[Category:JavaScript]]