Upgrade next and react to latest

.eslintrc.json

@@ -3,23 +3,18 @@
   "rules": {
     "@typescript-eslint/no-unused-vars": [
       "error",
-      {
-        "ignoreRestSiblings": true
-      }
+      { "ignoreRestSiblings": true }
     ],
     "@typescript-eslint/no-empty-function": ["warn"],
     "@typescript-eslint/no-empty-interface": [
       "error",
-      {
-        "allowSingleExtends": false
-      }
+      { "allowSingleExtends": false }
     ],
+    "@typescript-eslint/no-empty-object-type": ["warn"],
     "curly": ["warn", "all"],
     "@typescript-eslint/no-unused-expressions": [
-      "error", {
-        "allowTernary": true,
-        "enforceForJSX": true
-      }
+      "error",
+      { "allowTernary": true, "enforceForJSX": true }
     ]
   }
 }

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 pnpm --silent dlx lint-staged

.lintstagedrc.mjs

@@ -0,0 +1,8 @@
+import path from 'path';
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames.map((f) => path.relative(process.cwd(), f)).join(' --file ')}`;
+
+export default {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
+};

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.1",
   "engines": {
-    "node": "18.17.0"
+    "node": ">=v18.18.0"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -21,7 +21,7 @@
     "build-storybook": "storybook build",
     "build-bibstem-index": "node ./scripts/gen-bibstem-index",
     "lint": "next lint",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.1.0",
@@ -67,8 +67,6 @@
     "dotenv": "^16.3.1",
     "downshift": "^6.1.7",
     "escape-html": "^1.0.3",
-    "eslint": "8",
-    "eslint-config-next": "^15.0.0",
     "file-saver": "^2.0.5",
     "framer-motion": "^6.5.1",
     "fuse.js": "^6.6.2",
@@ -81,7 +79,7 @@
     "lucene": "^2.1.1",
     "match-sorter": "^6.3.1",
     "memoize-one": "^6.0.0",
-    "next": "14.2.10",
+    "next": "15.0.1",
     "next-build-id": "^3.0.0",
     "nprogress": "^0.2.0",
     "pino": "^8.16.2",
@@ -90,7 +88,7 @@
     "qs": "^6.11.0",
     "ramda": "^0.28.0",
     "ramda-adjunct": "^3.3.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-compound-slider": "^3.4.0",
     "react-device-detect": "^2.2.3",
     "react-error-boundary": "^4.0.4",
@@ -153,14 +151,16 @@
     "@vitest/coverage-v8": "^0.34.5",
     "@vitest/ui": "^0.29.2",
     "c8": "^7.13.0",
-    "husky": "^8.0.0",
+    "eslint": "^9.13.0",
+    "eslint-config-next": "^15.0.1",
+    "husky": "^9.1.6",
     "identity-obj-proxy": "^3.0.0",
     "iron-session": "^6.3.1",
     "lint-staged": "^11.2.6",
     "msw": "^1.2.3",
     "msw-storybook-addon": "^1.8.0",
     "prettier": "^2.3.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-is": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
     "storybook": "^7.5.3",
@@ -173,12 +173,8 @@
     "webpack": "^5.94.0"
   },
   "volta": {
-    "node": "18.17.0"
-  },
-  "lint-staged": {
-    "**/*.ts(x)?": [
-      "prettier --write"
-    ]
+    "node": "18.18.0",
+    "yarn": "1.22.19"
   },
   "msw": {
     "workerDirectory": "public"

src/components/Layout/Layout.tsx

@@ -12,10 +12,16 @@ import { Favicons } from '@/components/Favicons/Favicons';
 import { BRAND_NAME_FULL } from '@/config';
 import { LandingTabsStatic } from '@/components/LandingTabs';
 
-const LandingTabs = dynamic(() => import('@/components/LandingTabs/LandingTabs').then((mod) => mod.LandingTabs), {
-  ssr: false,
-  loading: () => <LandingTabsStatic />,
-});
+const LandingTabs = dynamic(
+  () =>
+    import('@/components/LandingTabs/LandingTabs').then((mod) => ({
+      default: mod.LandingTabs,
+    })),
+  {
+    ssr: false,
+    loading: () => <LandingTabsStatic />,
+  },
+);
 
 const LANDING_PAGES = ['/', '/classic-form', '/paper-form'];
 export const Layout: FC = ({ children }) => {

src/components/NavBar/NavBar.tsx

@@ -5,13 +5,22 @@ import { FC } from 'react';
 import { SimpleLink } from '@/components/SimpleLink';
 
 const AppModeDropdown = dynamic<Record<string, never>>(
-  () => import('./AppModeDropdown').then((mod) => mod.AppModeDropdown),
+  () =>
+    import('./AppModeDropdown').then((mod) => ({
+      default: mod.AppModeDropdown,
+    })),
   {
     ssr: false,
   },
 );
 
-const NavMenus = dynamic<Record<string, never>>(() => import('./NavMenus').then((mod) => mod.NavMenus), { ssr: false });
+const NavMenus = dynamic<Record<string, never>>(
+  () =>
+    import('./NavMenus').then((mod) => ({
+      default: mod.NavMenus,
+    })),
+  { ssr: false },
+);
 
 export const NavBar: FC = () => {
   return (

src/components/ResultList/Item/Item.tsx

@@ -30,7 +30,10 @@ import { getFormattedNumericPubdate, unwrapStringValue } from '@/utils/common/fo
 import { IDocsEntity } from '@/api/search/types';
 
 const AbstractPreview = dynamic<IAbstractPreviewProps>(
-  () => import('./AbstractPreview').then((mod) => mod.AbstractPreview),
+  () =>
+    import('./AbstractPreview').then((mod) => ({
+      default: mod.AbstractPreview,
+    })),
   { ssr: false },
 );
 export interface IItemProps {

src/middleware.ts

@@ -113,7 +113,10 @@ const emitAnalytics = async (req: NextRequest): Promise<void> => {
 
   // For abs/ routes we want to send emit an event to the link gateway
   if (path.startsWith('/abs')) {
-    const url = `${process.env.BASE_URL}/link_gateway${path.replace('/abs', '')}`;
+    const url = `${process.env.BASE_URL}/link_gateway${path.replace(
+      '/abs',
+      '',
+    )}`;
     log.debug({ path, url }, 'Emitting abs route event to link gateway');
 
     try {
@@ -126,6 +129,15 @@ const emitAnalytics = async (req: NextRequest): Promise<void> => {
   return Promise.resolve();
 };
 
+const getIp = (req: NextRequest) =>
+  (
+    req.headers.get('X-Original-Forwarded-For') ||
+    req.headers.get('X-Forwarded-For') ||
+    req.headers.get('X-Real-Ip')
+  )
+    .split(',')
+    .shift() || 'unknown';
+
 export async function middleware(req: NextRequest) {
   const path = req.nextUrl.pathname;
   log.info(
@@ -147,7 +159,7 @@ export async function middleware(req: NextRequest) {
     return res;
   }
 
-  const ip = req.ip || req.headers.get('x-forwarded-for') || 'unknown';
+  const ip = getIp(req);
 
   // Apply rate limiting
   if (!rateLimit(ip)) {
@@ -171,15 +183,21 @@ export async function middleware(req: NextRequest) {
     return loginMiddleware(req, res);
   }
 
-  if (path.startsWith('/user/account/register') || path.startsWith('/user/forgotpassword')) {
+  if (
+    path.startsWith('/user/account/register') ||
+    path.startsWith('/user/forgotpassword')
+  ) {
     return redirectIfAuthenticated(req, res);
   }
 
   if (path.startsWith('/user/libraries') || path.startsWith('/user/settings')) {
     return protectedRoute(req, res);
   }
 
-  if (path.startsWith('/user/account/verify/change-email') || path.startsWith('/user/account/verify/register')) {
+  if (
+    path.startsWith('/user/account/verify/change-email') ||
+    path.startsWith('/user/account/verify/register')
+  ) {
     return verifyMiddleware(req, res);
   }
 

src/middlewares/botCheck.ts

@@ -12,10 +12,13 @@ enum CRAWLER_RESULT {
 }
 
 const getIp = (req: NextRequest) =>
-  req.headers.get('X-Original-Forwarded-For') ||
-  req.headers.get('X-Forwarded-For') ||
-  req.headers.get('X-Real-Ip') ||
-  req.ip;
+  (
+    req.headers.get('X-Original-Forwarded-For') ||
+    req.headers.get('X-Forwarded-For') ||
+    req.headers.get('X-Real-Ip')
+  )
+    .split(',')
+    .shift() || 'unknown';
 
 const crawlerCheck = async (req: NextRequest, ip: string, ua: string) => {
   try {

src/pages/_app.tsx

@@ -34,7 +34,10 @@ if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled' && process.env.NODE_ENV !=
 }
 
 const TopProgressBar = dynamic<Record<string, never>>(
-  () => import('@/components/TopProgressBar').then((mod) => mod.TopProgressBar),
+  () =>
+    import('@/components/TopProgressBar').then((mod) => ({
+      default: mod.TopProgressBar,
+    })),
   {
     ssr: false,
   },

src/pages/abs/[id]/abstract.tsx

@@ -58,7 +58,10 @@ import { IADSApiSearchParams, IDocsEntity } from '@/api/search/types';
 import { getAbstractParams } from '@/api/search/models';
 
 const AllAuthorsModal = dynamic<IAllAuthorsModalProps>(
-  () => import('@/components/AllAuthorsModal').then((m) => m.AllAuthorsModal),
+  () =>
+    import('@/components/AllAuthorsModal').then((m) => ({
+      default: m.AllAuthorsModal,
+    })),
   { ssr: false },
 );
 

src/pages/index.tsx

@@ -22,17 +22,26 @@ import { makeSearchParams, normalizeSolrSort } from '@/utils/common/search';
 import { SolrSort } from '@/api/models';
 
 const SearchExamples = dynamic<ISearchExamplesProps>(
-  () => import('@/components/SearchExamples').then((m) => m.SearchExamples),
+  () =>
+    import('@/components/SearchExamples').then((m) => ({
+      default: m.SearchExamples,
+    })),
   { ssr: false, loading: () => <SearchExamplesPlaceholder /> },
 );
-const Pager = dynamic<IPagerProps>(() => import('@/components/Pager').then((m) => m.Pager), {
-  ssr: false,
-  loading: () => (
-    <Center>
-      <Spinner />
-    </Center>
-  ),
-});
+const Pager = dynamic<IPagerProps>(
+  () =>
+    import('@/components/Pager').then((m) => ({
+      default: m.Pager,
+    })),
+  {
+    ssr: false,
+    loading: () => (
+      <Center>
+        <Spinner />
+      </Center>
+    ),
+  },
+);
 
 const HomePage: NextPage = () => {
   const { settings } = useSettings();

src/pages/search/index.tsx

@@ -55,12 +55,18 @@ import { defaultParams } from '@/api/search/models';
 import { SolrSort } from '@/api/models';
 
 const YearHistogramSlider = dynamic<IYearHistogramSliderProps>(
-  () => import('@/components/SearchFacet/YearHistogramSlider').then((mod) => mod.YearHistogramSlider),
+  () =>
+    import('@/components/SearchFacet/YearHistogramSlider').then((mod) => ({
+      default: mod.YearHistogramSlider,
+    })),
   { ssr: false },
 );
 
 const SearchFacets = dynamic<ISearchFacetsProps>(
-  () => import('@/components/SearchFacet').then((mod) => mod.SearchFacets),
+  () =>
+    import('@/components/SearchFacet').then((mod) => ({
+      default: mod.SearchFacets,
+    })),
   { ssr: false },
 );
 

src/pages/user/orcid/index.tsx

@@ -19,14 +19,26 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { BRAND_NAME_FULL } from '@/config';
 
-const UserSettings = dynamic(() => import('@/components/Orcid/UserSettings').then((m) => m.UserSettings), {
-  ssr: false,
-  loading: () => <Spinner />,
-});
-const WorksTable = dynamic(() => import('@/components/Orcid/WorksTable').then((m) => m.WorksTable), {
-  ssr: false,
-  loading: () => <Spinner />,
-});
+const UserSettings = dynamic(
+  () =>
+    import('@/components/Orcid/UserSettings').then((m) => ({
+      default: m.UserSettings,
+    })),
+  {
+    ssr: false,
+    loading: () => <Spinner />,
+  },
+);
+const WorksTable = dynamic(
+  () =>
+    import('@/components/Orcid/WorksTable').then((m) => ({
+      default: m.WorksTable,
+    })),
+  {
+    ssr: false,
+    loading: () => <Spinner />,
+  },
+);
 
 const setOrcidModeSelector = (state: AppState) => state.setOrcidMode;
 const orcidModeActiveSelector = (state: AppState) => state.orcid.active;