fix: upgrade to Next.js 16 and fix pnpm 10 compatibility

- Upgrade Next.js from 15.5.6 to 16.1.1
- Upgrade eslint-config-next to 16.1.1 for ESLint 9 flat config support
- Add required ESLint dependencies (@eslint/js, @eslint/eslintrc, typescript-eslint)
- Rewrite eslint.config.mjs to use Next.js 16's native flat config
- Fix React hooks lint errors (set-state-in-effect) by using queueMicrotask
- Fix exhaustive-deps warning in LookupInput
- Suppress false positive refs lint error in react-hook-form integration

This resolves pnpm 10's stricter package resolution and module exports handling.
This commit is contained in:
2025-12-26 14:15:58 -06:00
parent 3ea58496b6
commit dd9433283e
6 changed files with 749 additions and 325 deletions
+9 -43
View File
@@ -1,17 +1,5 @@
import typescriptEslint from "@typescript-eslint/eslint-plugin"; import nextConfig from "eslint-config-next";
import tsParser from "@typescript-eslint/parser"; import tseslint from "typescript-eslint";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
});
export default [ export default [
// Base configuration with ignores // Base configuration with ignores
@@ -24,48 +12,26 @@ export default [
"out/**", "out/**",
"*.config.mjs", "*.config.mjs",
"*.config.js", "*.config.js",
"next-env.d.ts", // Next.js generated file
], ],
}, },
// Next.js core web vitals using FlatCompat // Next.js core web vitals config
...compat.extends("next/core-web-vitals"), ...nextConfig,
// TypeScript recommended rules // TypeScript recommended rules
...compat.extends("plugin:@typescript-eslint/recommended"), ...tseslint.configs.recommended,
// Base TypeScript configuration // TypeScript rules requiring type checking
{
plugins: {
"@typescript-eslint": typescriptEslint,
},
languageOptions: {
parser: tsParser,
ecmaVersion: "latest",
sourceType: "module",
parserOptions: {
project: "./tsconfig.json",
},
},
rules: {
"@typescript-eslint/consistent-type-imports": "warn",
},
},
// Additional strict TypeScript rules for .ts and .tsx files
{ {
files: ["**/*.ts", "**/*.tsx"], files: ["**/*.ts", "**/*.tsx"],
...compat.extends("plugin:@typescript-eslint/recommended-requiring-type-checking")[0],
languageOptions: { languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
parserOptions: { parserOptions: {
project: "./tsconfig.json", project: "./tsconfig.json",
}, },
}, },
rules: {
"@typescript-eslint/consistent-type-imports": "warn",
},
}, },
// Allow CommonJS require in .cjs files // Allow CommonJS require in .cjs files
+6 -3
View File
@@ -25,7 +25,7 @@
"clsx": "^2.1.1", "clsx": "^2.1.1",
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0", "date-fns-tz": "^3.2.0",
"next": "^15.5.6", "next": "^16.1.1",
"next-themes": "^0.4.6", "next-themes": "^0.4.6",
"overlayscrollbars": "^2.12.0", "overlayscrollbars": "^2.12.0",
"overlayscrollbars-react": "^0.5.6", "overlayscrollbars-react": "^0.5.6",
@@ -44,6 +44,8 @@
"@codecov/vite-plugin": "^1.9.1", "@codecov/vite-plugin": "^1.9.1",
"@commitlint/cli": "^20.0.0", "@commitlint/cli": "^20.0.0",
"@commitlint/config-conventional": "^20.0.0", "@commitlint/config-conventional": "^20.0.0",
"@eslint/eslintrc": "^3.3.3",
"@eslint/js": "^9.39.2",
"@posthog/nextjs-config": "^1.3.6", "@posthog/nextjs-config": "^1.3.6",
"@tailwindcss/postcss": "^4.1.15", "@tailwindcss/postcss": "^4.1.15",
"@testing-library/jest-dom": "^6.9.1", "@testing-library/jest-dom": "^6.9.1",
@@ -55,8 +57,8 @@
"@typescript-eslint/parser": "^8.46.2", "@typescript-eslint/parser": "^8.46.2",
"@vitest/coverage-v8": "^4.0.1", "@vitest/coverage-v8": "^4.0.1",
"@vitest/ui": "^4.0.1", "@vitest/ui": "^4.0.1",
"eslint": "^9.38.0", "eslint": "^9.39.2",
"eslint-config-next": "15.5.6", "eslint-config-next": "16.1.1",
"happy-dom": "^20.0.8", "happy-dom": "^20.0.8",
"husky": "^9.0.0", "husky": "^9.0.0",
"lint-staged": "^16.0.0", "lint-staged": "^16.0.0",
@@ -65,6 +67,7 @@
"prettier-plugin-tailwindcss": "^0.7.1", "prettier-plugin-tailwindcss": "^0.7.1",
"tailwindcss": "^4.1.15", "tailwindcss": "^4.1.15",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"typescript-eslint": "^8.50.1",
"vitest": "^4.0.1" "vitest": "^4.0.1"
}, },
"ct3aMetadata": { "ct3aMetadata": {
+724 -275
View File
File diff suppressed because it is too large Load Diff
+3
View File
@@ -70,8 +70,11 @@ const CopyButton: FunctionComponent<CopyButtonProps> = ({
// Consolidated timer effect: Reset copied state, tooltip, and force-open flag // Consolidated timer effect: Reset copied state, tooltip, and force-open flag
useEffect(() => { useEffect(() => {
if (copied) { if (copied) {
// Schedule state updates to avoid synchronous setState in effect
queueMicrotask(() => {
forceOpenRef.current = true; forceOpenRef.current = true;
setTooltipOpen(true); setTooltipOpen(true);
});
const timer = setTimeout(() => { const timer = setTimeout(() => {
setCopied(false); setCopied(false);
+2 -1
View File
@@ -27,7 +27,8 @@ export const ThemeToggle = () => {
// Avoid hydration mismatch by only rendering after mount // Avoid hydration mismatch by only rendering after mount
useEffect(() => { useEffect(() => {
setMounted(true); // Schedule state update to avoid synchronous setState in effect
queueMicrotask(() => setMounted(true));
}, []); }, []);
if (!mounted) { if (!mounted) {
+3 -1
View File
@@ -145,7 +145,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
if (showingPlaceholder) { if (showingPlaceholder) {
setShowingPlaceholder(false); setShowingPlaceholder(false);
} }
}, [detectedType]); }, [detectedType, showingPlaceholder]);
/** /**
* Restore focus to the input when loading completes. * Restore focus to the input when loading completes.
@@ -160,6 +160,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
} }
}, [isLoading]); }, [isLoading]);
/* eslint-disable react-hooks/refs -- False positive: isFocusedRef only accessed in event handlers, not during render */
return ( return (
<form <form
className="pb-2.5" className="pb-2.5"
@@ -342,6 +343,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
</Flex> </Flex>
</form> </form>
); );
/* eslint-enable react-hooks/refs */
}; };
export default LookupInput; export default LookupInput;