feat: React 19 / Next 16 support (INTER-2317)

.changeset/react-19-next-16-support.md

@@ -0,0 +1,5 @@
+---
+'@fingerprint/react': minor
+---
+
+Add support for React 19 and Next.js 16. The `react` peer range now accepts `>=18 <20`.

.github/workflows/ci.yml

@@ -4,9 +4,18 @@ on:
     branches-ignore:
       - main
     paths-ignore:
-      - '**.md'
+      - "**.md"
 
 jobs:
   build-and-check:
-    name: Build project and run CI checks
+    name: Build project and run CI checks (React 18)
     uses: fingerprintjs/dx-team-toolkit/.github/workflows/build-typescript-project.yml@v1
+
+  build-and-check-react-19:
+    name: Build project and run CI checks (React 19)
+    uses: fingerprintjs/dx-team-toolkit/.github/workflows/build-typescript-project.yml@v1
+    with:
+      # Overrides the pnpm-workspace.yaml catalog (pinned to React 18) for this
+      # job only, so the SDK itself is additionally verified against React 19.
+      # Example apps are unaffected: `-w` only touches the root package.
+      runAfterInstall: pnpm add -w react@19 react-dom@19 @types/react@19 @types/react-dom@19

README.md

@@ -39,7 +39,7 @@ Fingerprint is a device intelligence platform offering industry-leading accuracy
 
 ## Requirements
 
-- React 18 or higher
+- React 18 or 19
 - For Preact users: Preact 10.3 or higher
 - For Next.js users: Next.js 13.1 or higher
 - For TypeScript users: TypeScript 4.8 or higher

eslint.config.mjs

@@ -5,13 +5,28 @@ import cfg from '@fingerprintjs/eslint-config-dx-team/type-checked'
 import react from '@eslint-react/eslint-plugin'
 import tseslint from 'typescript-eslint'
 import reactHooks from 'eslint-plugin-react-hooks'
+import nextPlugin from '@next/eslint-plugin-next'
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url))
 
+// The two Next.js examples additionally get Next's own lint rules. This uses
+// @next/eslint-plugin-next directly rather than eslint-config-next: the latter
+// bundles eslint-plugin-react, which only supports ESLint <10 and crashes on
+// this repo's ESLint 10.
+const NEXT_EXAMPLE_FILES = ['examples/next/**/*.{js,jsx,ts,tsx}', 'examples/next-appDir/**/*.{js,jsx,ts,tsx}']
+
 const config = [
   includeIgnoreFile(path.resolve(__dirname, '.gitignore')),
   {
-    ignores: ['examples/**/build/**', 'examples/**/dist/**', 'examples/**/.next/**', 'examples/**/node_modules/**'],
+    // next-env.d.ts is regenerated by `next build`/`next dev` on every run (and says
+    // "should not be edited"), so linting/formatting a committed copy of it is futile.
+    ignores: [
+      'examples/**/build/**',
+      'examples/**/dist/**',
+      'examples/**/.next/**',
+      'examples/**/node_modules/**',
+      'examples/**/next-env.d.ts',
+    ],
   },
   ...cfg,
   {
@@ -28,6 +43,25 @@ const config = [
       },
     },
   },
+  {
+    files: NEXT_EXAMPLE_FILES,
+    ...nextPlugin.configs['core-web-vitals'],
+    settings: {
+      // Without this, rules like no-html-link-for-pages default to looking for
+      // pages/app at the repo root and silently no-op, since both examples live
+      // under examples/.
+      next: { rootDir: ['examples/next', 'examples/next-appDir'] },
+    },
+  },
+  {
+    // peerDependencies declare react >=18 <20, so React 19-only idioms (the `use` hook,
+    // bare `<Context>` as a provider) would break React 18 consumers.
+    files: ['src/**/*.{ts,tsx}', '__tests__/**/*.{ts,tsx}'],
+    rules: {
+      '@eslint-react/no-use-context': 'off',
+      '@eslint-react/no-context-provider': 'off',
+    },
+  },
   {
     files: ['examples/preact/**/*.{ts,tsx}', 'examples/**/vite.config.ts'],
     ...tseslint.configs.disableTypeChecked,

examples/next-appDir/README.md

@@ -1,4 +1,4 @@
-This example demonstrates the usage of Fingerprint inside Next 14's `app` directory approach.\
+This example demonstrates the usage of Fingerprint inside Next.js's `app` directory approach.\
 Note how you can use Fingerprint inside a React Server Component without issues as it is correctly executed in the browser only.
 See [../next](../next/README.md) for an example using the classic `pages` approach.
 

examples/next-appDir/next-env.d.ts

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

examples/next-appDir/package.json

@@ -2,6 +2,9 @@
   "name": "next-appDir",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": ">=20.9.0"
+  },
   "scripts": {
     "dev": "next dev --port=3003",
     "build": "next build",
@@ -10,7 +13,7 @@
   },
   "dependencies": {
     "@fingerprint/react": "workspace:*",
-    "next": "14.2.35"
+    "next": "16.2.10"
   },
   "devDependencies": {
     "@types/node": "catalog:",

examples/next-appDir/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2020",
     "lib": [
       "dom",
       "dom.iterable",
@@ -13,10 +13,10 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -28,7 +28,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"

examples/next/next-env.d.ts

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

examples/next/package.json

@@ -2,6 +2,9 @@
   "name": "next-example",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": ">=20.9.0"
+  },
   "scripts": {
     "dev": "next dev --port=3002",
     "build": "next build",
@@ -10,7 +13,7 @@
   },
   "dependencies": {
     "@fingerprint/react": "workspace:*",
-    "next": "14.2.35"
+    "next": "16.2.10"
   },
   "devDependencies": {
     "@types/node": "catalog:",

examples/next/tsconfig.json

@@ -1,20 +1,30 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "es2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

package.json

@@ -33,7 +33,7 @@
     "prepare": "husky",
     "watch": "vite build --watch",
     "build": "vite build",
-    "lint": "eslint --max-warnings 0",
+    "lint": "eslint --max-warnings 0 --no-warn-ignored",
     "lint:fix": "pnpm lint --fix",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -63,7 +63,7 @@
     "fast-deep-equal": "3.1.3"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 <20"
   },
   "devDependencies": {
     "@changesets/cli": "^2.31.1",
@@ -75,6 +75,7 @@
     "@fingerprintjs/prettier-config-dx-team": "^0.3.0",
     "@fingerprintjs/tsconfig-dx-team": "^0.0.2",
     "@microsoft/api-extractor": "^7.58.9",
+    "@next/eslint-plugin-next": "^16.2.10",
     "@testing-library/preact": "^3.2.4",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",