Update to Node.js 24

Author: efoken

.github/workflows/node.js.yml

@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x, 20.x, 22.x]
+        node-version: [20.x, 22.x, 24.x]
     steps:
       - uses: actions/checkout@v4
 

.nvmrc

@@ -1 +1 @@
-v22.17.1
+v24.6.0

app/babel.config.js

@@ -1,6 +1,6 @@
 /** @type {import('@babel/core').ConfigFunction} */
 const config = (api) => {
-  api.cache(true);
+  api.cache.forever();
   return {
     presets: ['babel-preset-expo'],
     plugins: [['@react-universal/babel-plugin', { root: 'src' }]],

docs/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

docs/next.config.mjs docs/next.config.tsdocs/next.config.mjs renamed to docs/next.config.ts

@@ -1,7 +1,8 @@
+import type { NextConfig } from 'next';
 import { build } from 'velite';
+import type { Compiler, WebpackPluginInstance } from 'webpack';
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -17,18 +18,18 @@ const nextConfig = {
     ...config,
     plugins: [
       ...config.plugins,
-      new (class {
+      new (class WebpackPlugin implements WebpackPluginInstance {
         static started = false;
-        apply(compiler) {
+        apply(compiler: Compiler) {
           compiler.hooks.afterEnvironment.tap('@react-universal/webpack-plugin', () => {
             compiler.options.resolve.conditionNames = [
-              ...compiler.options.resolve.conditionNames,
+              ...(compiler.options.resolve.conditionNames ?? []),
               'source',
             ];
           });
           compiler.hooks.beforeCompile.tapPromise('@react-universal/webpack-plugin', async () => {
-            if (!this.started) {
-              this.started = true;
+            if (!WebpackPlugin.started) {
+              WebpackPlugin.started = true;
               const dev = compiler.options.mode === 'development';
               await build({ watch: dev, clean: !dev });
             }

docs/package.json

@@ -17,9 +17,10 @@
     "@react-universal/elements": "workspace:*",
     "@react-universal/next": "workspace:*",
     "@shikijs/rehype": "^3.11.0",
-    "@types/node": "^22.17.2",
+    "@types/node": "^24.3.0",
     "@types/react": "~19.1.11",
     "@types/react-dom": "~19.1.7",
+    "@types/webpack": "^5.28.5",
     "next": "^15.5.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
@@ -31,6 +32,6 @@
     "scule": "^1.3.0",
     "typescript": "~5.9.2",
     "unified": "^11.0.5",
-    "velite": "^0.2.4"
+    "velite": "^0.3.0"
   }
 }

docs/velite.config.ts

@@ -37,7 +37,7 @@ const docs = defineCollection({
           ? `${docsConfig.storybookUrl}/?path=/story/${data.links.storybook}`
           : undefined,
       },
-      category: meta.path
+      category: (meta.path as string)
         .replace(/.*\/content\//, '')
         .replace(/\/[^/]*$/, '')
         .replace(process.cwd(), ''),

package.json

@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.2",
-    "@chialab/esbuild-plugin-babel": "^0.18.0",
+    "@chialab/esbuild-plugin-babel": "^0.19.0",
     "@emotion/jest": "^11.13.0",
     "@react-native/normalize-colors": "0.81.0",
     "@storybook/addon-a11y": "^9.1.3",

sandbox/next-app/next.config.mjs sandbox/next-app/next.config.tssandbox/next-app/next.config.mjs renamed to sandbox/next-app/next.config.ts

@@ -1,21 +1,24 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+import type { NextConfig } from 'next';
+import type { Compiler, WebpackPluginInstance } from 'webpack';
+
+const nextConfig: NextConfig = {
   transpilePackages: [
     '@react-universal/components',
     '@react-universal/core',
     '@react-universal/elements',
+    '@react-universal/next',
     '@react-universal/svg',
     '@react-universal/utils',
   ],
   webpack: (config) => ({
     ...config,
     plugins: [
       ...config.plugins,
-      new (class {
-        apply(compiler) {
+      new (class implements WebpackPluginInstance {
+        apply(compiler: Compiler) {
           compiler.hooks.afterEnvironment.tap('@react-universal/webpack-plugin', () => {
             compiler.options.resolve.conditionNames = [
-              ...compiler.options.resolve.conditionNames,
+              ...(compiler.options.resolve.conditionNames ?? []),
               'source',
             ];
           });

sandbox/next-app/package.json

@@ -13,7 +13,7 @@
     "@react-universal/core": "workspace:*",
     "@react-universal/elements": "workspace:*",
     "@react-universal/next": "workspace:*",
-    "@types/node": "^22.17.2",
+    "@types/node": "^24.3.0",
     "@types/react": "~19.1.11",
     "@types/react-dom": "~19.1.7",
     "next": "^15.5.0",