fix(deps): update dependency react-email to v6 (#32143)

* fix(deps): update dependency react-email to v6

* fix: move all react email imports to react-email

* fix: linting

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
(cherry picked from commit 9755f64684de63f1e9c5d14d31d00f599f8925b9)

server/package.json

@@ -61,8 +61,6 @@
     "@opentelemetry/sdk-metrics": "^2.0.1",
     "@opentelemetry/sdk-node": "^0.222.0",
     "@opentelemetry/semantic-conventions": "^1.34.0",
-    "@react-email/components": "^1.0.0",
-    "@react-email/render": "^2.0.0",
     "@socket.io/redis-adapter": "^8.3.0",
     "archiver": "^7.0.0",
     "async-lock": "^1.4.0",
@@ -104,7 +102,7 @@
     "postgres": "3.4.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-email": "^5.0.0",
+    "react-email": "^6.0.0",
     "reflect-metadata": "^0.2.0",
     "rxjs": "^7.8.1",
     "sanitize-filename": "^1.6.3",

server/src/emails/album-invite.email.tsx

@@ -1,4 +1,4 @@
-import { Img, Link, Section, Text } from '@react-email/components';
+import { Img, Link, Section, Text } from 'react-email';
 import * as React from 'react';
 import { ImmichButton } from 'src/emails/components/button.component.js';
 import ImmichLayout from 'src/emails/components/immich.layout.js';

server/src/emails/album-update.email.tsx

@@ -1,4 +1,4 @@
-import { Img, Link, Section, Text } from '@react-email/components';
+import { Img, Link, Section, Text } from 'react-email';
 import * as React from 'react';
 import { ImmichButton } from 'src/emails/components/button.component.js';
 import ImmichLayout from 'src/emails/components/immich.layout.js';

server/src/emails/components/button.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button, ButtonProps, Text } from '@react-email/components';
+import { Button, ButtonProps, Text } from 'react-email';
 
 export const ImmichButton = ({ children, ...props }: ButtonProps) => (
   <Button

server/src/emails/components/footer.template.tsx

@@ -1,4 +1,4 @@
-import { Column, Img, Link, Row, Text } from '@react-email/components';
+import { Column, Img, Link, Row, Text } from 'react-email';
 import * as React from 'react';
 
 export const ImmichFooter = () => (

server/src/emails/components/futo.layout.tsx

@@ -1,17 +1,4 @@
-import {
-  Body,
-  Container,
-  Font,
-  Head,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Section,
-  Tailwind,
-  Text,
-} from '@react-email/components';
+import { Body, Container, Font, Head, Hr, Html, Img, Link, Preview, Section, Tailwind, Text } from 'react-email';
 import * as React from 'react';
 import { ImmichFooter } from './footer.template.js';
 // @ts-expect-error

server/src/emails/components/immich.layout.tsx

@@ -1,4 +1,4 @@
-import { Body, Container, Font, Head, Hr, Html, Img, Preview, Section, Tailwind, Text } from '@react-email/components';
+import { Body, Container, Font, Head, Hr, Html, Img, Preview, Section, Tailwind, Text } from 'react-email';
 import * as React from 'react';
 import { ImmichFooter } from 'src/emails/components/footer.template.js';
 // @ts-expect-error

server/src/emails/license.email.tsx

@@ -1,4 +1,4 @@
-import { Link, Section, Text } from '@react-email/components';
+import { Link, Section, Text } from 'react-email';
 import * as React from 'react';
 import { ImmichButton } from 'src/emails/components/button.component.js';
 import FutoLayout from 'src/emails/components/futo.layout.js';

server/src/emails/test.email.tsx

@@ -1,4 +1,4 @@
-import { Link, Row, Text } from '@react-email/components';
+import { Link, Row, Text } from 'react-email';
 import * as React from 'react';
 import ImmichLayout from 'src/emails/components/immich.layout.js';
 import { TestEmailProps } from 'src/repositories/email.repository.js';

server/src/emails/welcome.email.tsx

@@ -1,4 +1,4 @@
-import { Link, Section, Text } from '@react-email/components';
+import { Link, Section, Text } from 'react-email';
 import * as React from 'react';
 import { ImmichButton } from 'src/emails/components/button.component.js';
 import ImmichLayout from 'src/emails/components/immich.layout.js';

server/src/repositories/email.repository.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@nestjs/common';
-import { render } from '@react-email/render';
 import { createTransport } from 'nodemailer';
 import React, { createElement } from 'react';
+import { render } from 'react-email';
 import type { EmailImageAttachment } from 'src/types.js';
 import { AlbumInviteEmail } from 'src/emails/album-invite.email.js';
 import { AlbumUpdateEmail } from 'src/emails/album-update.email.js';

web/package.json

@@ -113,7 +113,7 @@
     "svelte-eslint-parser": "^1.8.1",
     "tailwindcss": "^4.2.4",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-eslint": "^8.45.0",
+    "typescript-eslint": "8.71.1",
     "vite": "^8.0.0",
     "vitest": "^4.0.0"
   }

web/src/lib/utils/ocr-utils.ts

@@ -121,7 +121,6 @@ export const calculateFittedFontSize = (
       return clamp(fontSize, MIN_FONT_SIZE, MAX_FONT_SIZE);
     }
 
-    // eslint-disable-next-line tscompat/tscompat
     context.font = getReferenceFont();
 
     let maxCharWidth = 0;
@@ -147,7 +146,6 @@ export const calculateFittedFontSize = (
   }
 
   // Unsupported in Safari iOS <16.6; falls back to default canvas font, giving less accurate but functional sizing
-  // eslint-disable-next-line tscompat/tscompat
   context.font = getReferenceFont();
 
   const metrics = context.measureText(text);

web/src/lib/utils/wakelock.svelte.ts

@@ -10,7 +10,7 @@ export async function acquireWakeLock() {
   if (!isSupported) {
     return;
   }
-  // eslint-disable-next-line tscompat/tscompat
+
   if (sentinel && !sentinel.released) {
     return;
   }
@@ -19,7 +19,6 @@ export async function acquireWakeLock() {
   }
   acquiring = true;
   try {
-    // eslint-disable-next-line tscompat/tscompat
     sentinel = await navigator.wakeLock.request('screen');
   } catch (error) {
     console.warn('Failed to acquire wake lock:', error);
@@ -37,7 +36,6 @@ export async function releaseWakeLock() {
   // Unset first to avoid race condition after await
   sentinel = undefined;
 
-  // eslint-disable-next-line tscompat/tscompat
   await toReleaseSentinel.release();
 }