refactor: update Next.js, React.js and Node.js

.eslintrc.js

@@ -5,9 +5,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
     'plugin:jsx-a11y/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/jsx-runtime',
+    'plugin:@next/next/recommended',
     'prettier',
   ],
   parserOptions: {

next.config.js

@@ -10,7 +10,11 @@ module.exports = {
     JELLYFIN_TYPE: process.env.JELLYFIN_TYPE,
   },
   images: {
-    domains: ['image.tmdb.org'],
+    remotePatterns: [
+      { hostname: 'gravatar.com' },
+      { hostname: 'image.tmdb.org' },
+      { hostname: '*', protocol: 'https' },
+    ],
   },
   webpack(config) {
     config.module.rules.push({

package.json

@@ -10,7 +10,7 @@
     "lint": "eslint \"./server/**/*.{ts,tsx}\" \"./src/**/*.{ts,tsx}\" --cache",
     "lintfix": "eslint \"./server/**/*.{ts,tsx}\" \"./src/**/*.{ts,tsx}\" --fix",
     "start": "NODE_ENV=production node dist/index.js",
-    "i18n:extract": "extract-messages -l=en -o src/i18n/locale -d en --flat true --overwriteDefault true \"./src/**/!(*.test).{ts,tsx}\"",
+    "i18n:extract": "ts-node --project server/tsconfig.json src/i18n/extractMessages.ts",
     "migration:generate": "ts-node -r tsconfig-paths/register --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:generate -d server/datasource.ts",
     "migration:create": "ts-node -r tsconfig-paths/register --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:create -d server/datasource.ts",
     "migration:run": "ts-node -r tsconfig-paths/register --project server/tsconfig.json ./node_modules/typeorm/cli.js migration:run -d server/datasource.ts",
@@ -34,6 +34,7 @@
     "@formatjs/intl-locale": "3.1.1",
     "@formatjs/intl-pluralrules": "5.1.10",
     "@formatjs/intl-utils": "3.8.4",
+    "@formatjs/swc-plugin-experimental": "^0.4.0",
     "@headlessui/react": "1.7.12",
     "@heroicons/react": "2.0.16",
     "@supercharge/request-ip": "1.2.0",
@@ -59,25 +60,24 @@
     "express-openapi-validator": "4.13.8",
     "express-rate-limit": "6.7.0",
     "express-session": "1.17.3",
-    "formik": "2.2.9",
+    "formik": "^2.4.6",
     "gravatar-url": "3.1.0",
-    "intl": "1.2.5",
     "lodash": "4.17.21",
-    "next": "12.3.4",
+    "next": "^14.2.4",
     "node-cache": "5.1.2",
     "node-gyp": "9.3.1",
     "node-schedule": "2.1.1",
     "nodemailer": "6.9.1",
     "openpgp": "5.7.0",
     "plex-api": "5.3.2",
     "pug": "3.0.2",
-    "react": "18.2.0",
+    "react": "^18.3.1",
     "react-ace": "10.1.0",
     "react-animate-height": "2.1.2",
     "react-aria": "3.23.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.3.1",
     "react-intersection-observer": "9.4.3",
-    "react-intl": "6.2.10",
+    "react-intl": "^6.6.8",
     "react-markdown": "8.0.5",
     "react-popper-tooltip": "4.4.2",
     "react-select": "5.7.0",
@@ -89,6 +89,7 @@
     "reflect-metadata": "0.1.13",
     "secure-random-password": "0.2.3",
     "semver": "7.3.8",
+    "sharp": "^0.33.4",
     "sqlite3": "5.1.4",
     "swagger-ui-express": "4.6.2",
     "swr": "2.0.4",
@@ -102,7 +103,6 @@
     "zod": "3.20.6"
   },
   "devDependencies": {
-    "@babel/cli": "7.21.0",
     "@commitlint/cli": "17.4.4",
     "@commitlint/config-conventional": "17.4.4",
     "@semantic-release/changelog": "6.0.2",
@@ -123,8 +123,8 @@
     "@types/node": "17.0.36",
     "@types/node-schedule": "2.1.0",
     "@types/nodemailer": "6.4.7",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-transition-group": "4.4.5",
     "@types/secure-random-password": "0.2.1",
     "@types/semver": "7.3.13",
@@ -136,23 +136,20 @@
     "@typescript-eslint/eslint-plugin": "5.54.0",
     "@typescript-eslint/parser": "5.54.0",
     "autoprefixer": "10.4.13",
-    "babel-plugin-react-intl": "8.2.25",
-    "babel-plugin-react-intl-auto": "3.3.0",
     "commitizen": "4.3.0",
     "copyfiles": "2.4.1",
     "cy-mobile-commands": "0.3.0",
     "cypress": "12.7.0",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "8.35.0",
-    "eslint-config-next": "12.3.4",
+    "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-formatjs": "4.9.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-no-relative-import-paths": "1.5.2",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "extract-react-intl-messages": "4.1.1",
     "husky": "8.0.3",
     "lint-staged": "13.1.2",
     "nodemon": "2.0.20",
@@ -170,8 +167,6 @@
   },
   "resolutions": {
     "sqlite3/node-gyp": "8.4.1",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
     "@types/express-session": "1.17.6"
   },
   "config": {

server/index.ts

@@ -146,7 +146,7 @@ app
       try {
         const descriptor = Object.getOwnPropertyDescriptor(req, 'ip');
         if (descriptor?.writable === true) {
-          req.ip = getClientIp(req) ?? '';
+          (req as any).ip = getClientIp(req) ?? '';
         }
       } catch (e) {
         logger.error('Failed to attach the ip to the request', {

server/tsconfig.json

@@ -5,6 +5,7 @@
     "module": "commonjs",
     "outDir": "../dist",
     "noEmit": false,
+    "incremental": true,
     "baseUrl": ".",
     "paths": {
       "@server/*": ["*"]

src/components/AirDateBadge/index.tsx

@@ -1,7 +1,8 @@
 import Badge from '@app/components/Common/Badge';
-import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
+import defineMessages from '@app/utils/defineMessages';
+import { FormattedRelativeTime, useIntl } from 'react-intl';
 
-const messages = defineMessages({
+const messages = defineMessages('components.AirDateBadge', {
   airedrelative: 'Aired {relativeTime}',
   airsrelative: 'Airing {relativeTime}',
 });

src/components/AppDataWarning/index.tsx

@@ -1,8 +1,9 @@
 import Alert from '@app/components/Common/Alert';
-import { defineMessages, useIntl } from 'react-intl';
+import defineMessages from '@app/utils/defineMessages';
+import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 
-const messages = defineMessages({
+const messages = defineMessages('components.AppDataWarning', {
   dockerVolumeMissingDescription:
     'The <code>{appDataPath}</code> volume mount was not configured properly. All data will be cleared when the container is stopped or restarted.',
 });

src/components/CollectionDetails/index.tsx

@@ -10,6 +10,7 @@ import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
+import defineMessages from '@app/utils/defineMessages';
 import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import { MediaStatus } from '@server/constants/media';
@@ -18,10 +19,10 @@ import { uniq } from 'lodash';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useMemo, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 
-const messages = defineMessages({
+const messages = defineMessages('components.CollectionDetails', {
   overview: 'Overview',
   numberofmovies: '{count} Movies',
   requestcollection: 'Request Collection',
@@ -166,10 +167,9 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
           <Link
             href={`/discover/movies/genre/${genreId}`}
             key={`genre-${genreId}`}
+            className="hover:underline"
           >
-            <a className="hover:underline">
-              {genres.find((g) => g.id === genreId)?.name}
-            </a>
+            {genres.find((g) => g.id === genreId)?.name}
           </Link>
         ))
         .reduce((prev, curr) => (
@@ -195,8 +195,8 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
           <CachedImage
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
             priority
           />
           <div
@@ -229,7 +229,8 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
                 : '/images/overseerr_poster_not_found.png'
             }
             alt=""
-            layout="responsive"
+            sizes="100vw"
+            style={{ width: '100%', height: 'auto' }}
             width={600}
             height={900}
             priority

src/components/Common/Accordion/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import { useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 

src/components/Common/Badge/index.tsx

@@ -93,13 +93,12 @@ const Badge = (
     );
   } else if (href) {
     return (
-      <Link href={href}>
-        <a
-          className={badgeStyle.join(' ')}
-          ref={ref as React.Ref<HTMLAnchorElement>}
-        >
-          {children}
-        </a>
+      <Link
+        href={href}
+        className={badgeStyle.join(' ')}
+        ref={ref as React.Ref<HTMLAnchorElement>}
+      >
+        {children}
       </Link>
     );
   } else {

src/components/Common/ImageFader/index.tsx

@@ -64,8 +64,8 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
             className="absolute inset-0 h-full w-full"
             alt=""
             src={imageUrl}
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
             {...overrides}
           />
           <div

src/components/Common/Modal/index.tsx

@@ -125,8 +125,8 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
               <CachedImage
                 alt=""
                 src={backdrop}
-                layout="fill"
-                objectFit="cover"
+                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                fill
                 priority
               />
               <div

src/components/Common/SettingsTabs/index.tsx

@@ -55,15 +55,14 @@ const SettingsLink = ({
   }
 
   return (
-    <Link href={route}>
-      <a
-        className={`${linkClasses} ${
-          currentPath.match(regex) ? activeLinkColor : inactiveLinkColor
-        }`}
-        aria-current="page"
-      >
-        {children}
-      </a>
+    <Link
+      href={route}
+      className={`${linkClasses} ${
+        currentPath.match(regex) ? activeLinkColor : inactiveLinkColor
+      }`}
+      aria-current="page"
+    >
+      {children}
     </Link>
   );
 };

src/components/CompanyCard/index.tsx

@@ -12,40 +12,39 @@ const CompanyCard = ({ image, url, name }: CompanyCardProps) => {
   const [isHovered, setHovered] = useState(false);
 
   return (
-    <Link href={url}>
-      <a
-        className={`relative flex h-32 w-56 transform-gpu cursor-pointer items-center justify-center p-8 shadow ring-1 transition duration-300 ease-in-out sm:h-36 sm:w-72 ${
-          isHovered
-            ? 'scale-105 bg-gray-700 ring-gray-500'
-            : 'scale-100 bg-gray-800 ring-gray-700'
-        } rounded-xl`}
-        onMouseEnter={() => {
+    <Link
+      href={url}
+      className={`relative flex h-32 w-56 transform-gpu cursor-pointer items-center justify-center p-8 shadow ring-1 transition duration-300 ease-in-out sm:h-36 sm:w-72 ${
+        isHovered
+          ? 'scale-105 bg-gray-700 ring-gray-500'
+          : 'scale-100 bg-gray-800 ring-gray-700'
+      } rounded-xl`}
+      onMouseEnter={() => {
+        setHovered(true);
+      }}
+      onMouseLeave={() => setHovered(false)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
           setHovered(true);
-        }}
-        onMouseLeave={() => setHovered(false)}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            setHovered(true);
-          }
-        }}
-        role="link"
-        tabIndex={0}
-      >
-        <div className="relative h-full w-full">
-          <CachedImage
-            src={image}
-            alt={name}
-            className="relative z-40 h-full w-full"
-            layout="fill"
-            objectFit="contain"
-          />
-        </div>
-        <div
-          className={`absolute bottom-0 left-0 right-0 z-0 h-12 rounded-b-xl bg-gradient-to-t ${
-            isHovered ? 'from-gray-800' : 'from-gray-900'
-          }`}
+        }
+      }}
+      role="link"
+      tabIndex={0}
+    >
+      <div className="relative h-full w-full">
+        <CachedImage
+          src={image}
+          alt={name}
+          className="relative z-40 h-full w-full"
+          style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+          fill
         />
-      </a>
+      </div>
+      <div
+        className={`absolute bottom-0 left-0 right-0 z-0 h-12 rounded-b-xl bg-gradient-to-t ${
+          isHovered ? 'from-gray-800' : 'from-gray-900'
+        }`}
+      />
     </Link>
   );
 };