feat(next): update to react 19 rc and next 15

apps/payments/next/app/%5F_heartbeat__/route.ts

@@ -4,4 +4,7 @@
 
 export const dynamic = 'force-dynamic';
 
-export { GET } from '../%5F_lbheartbeat__/route';
+export {
+  /* @next-codemod-error `GET` export is re-exported. Check if this component uses `params` or `searchParams`*/
+  GET,
+} from '../%5F_lbheartbeat__/route';

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/error/page.tsx

@@ -44,20 +44,19 @@ const getErrorReason = (reason: CartErrorReasonId | null) => {
   }
 };
 
-export default async function CheckoutError({
-  params,
-  searchParams,
-}: {
-  params: CheckoutParams;
-  searchParams: Record<string, string>;
+export default async function CheckoutError(props: {
+  params: Promise<CheckoutParams>;
+  searchParams: Promise<Record<string, string>>;
 }) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   // Temporarily defaulting to `accept-language`
   // This to be updated in FXA-9404
   //const locale = getLocaleFromRequest(
   //  params,
   //  headers().get('accept-language')
   //);
-  const locale = headers().get('accept-language') || DEFAULT_LOCALE;
+  const locale = (await headers()).get('accept-language') || DEFAULT_LOCALE;
 
   const cartPromise = getCartOrRedirectAction(
     params.cartId,

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/layout.tsx

@@ -28,20 +28,21 @@ export interface CheckoutSearchParams {
   promotion_code?: string;
 }
 
-export default async function RootLayout({
-  children,
-  params,
-}: {
+export default async function RootLayout(props: {
   children: React.ReactNode;
-  params: CheckoutParams;
+  params: Promise<CheckoutParams>;
 }) {
+  const params = await props.params;
+
+  const { children } = props;
+
   // Temporarily defaulting to `accept-language`
   // This to be updated in FXA-9404
   //const locale = getLocaleFromRequest(
   //  params,
   //  headers().get('accept-language')
   //);
-  const locale = headers().get('accept-language') || DEFAULT_LOCALE;
+  const locale = (await headers()).get('accept-language') || DEFAULT_LOCALE;
   const cmsDataPromise = fetchCMSData(params.offeringId, locale);
   const cartDataPromise = getCartAction(params.cartId);
   const sessionPromise = auth();

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/processing/page.tsx

@@ -11,8 +11,11 @@ import { getApp } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
 
-export default function ProcessingPage({ params }: { params: CheckoutParams }) {
-  const locale = headers().get('accept-language') || DEFAULT_LOCALE;
+export default async function ProcessingPage(props: {
+  params: Promise<CheckoutParams>;
+}) {
+  const params = await props.params;
+  const locale = (await headers()).get('accept-language') || DEFAULT_LOCALE;
   const l10n = getApp().getL10n(locale);
   return (
     <section

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx

@@ -20,18 +20,24 @@ import AppleLogo from '@fxa/shared/assets/images/apple-logo.svg';
 import GoogleLogo from '@fxa/shared/assets/images/google-logo.svg';
 import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
 import { auth } from 'apps/payments/next/auth';
-import { fetchCMSData, getCartOrRedirectAction } from '@fxa/payments/ui/actions';
+import {
+  fetchCMSData,
+  getCartOrRedirectAction,
+} from '@fxa/payments/ui/actions';
 
 export const dynamic = 'force-dynamic';
 
-export default async function Checkout({ params }: { params: CheckoutParams }) {
+export default async function Checkout(props: {
+  params: Promise<CheckoutParams>;
+}) {
+  const params = await props.params;
   // Temporarily defaulting to `accept-language`
   // This to be updated in FXA-9404
   //const locale = getLocaleFromRequest(
   //  params,
   //  headers().get('accept-language')
   //);
-  const locale = headers().get('accept-language') || DEFAULT_LOCALE;
+  const locale = (await headers()).get('accept-language') || DEFAULT_LOCALE;
   const sessionPromise = auth();
   const l10n = getApp().getL10n(locale);
   const cmsDataPromise = fetchCMSData(params.offeringId, locale);

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/success/page.tsx

@@ -39,20 +39,19 @@ const ConfirmationDetail = ({
   );
 };
 
-export default async function CheckoutSuccess({
-  params,
-  searchParams,
-}: {
-  params: CheckoutParams;
-  searchParams: Record<string, string>;
+export default async function CheckoutSuccess(props: {
+  params: Promise<CheckoutParams>;
+  searchParams: Promise<Record<string, string>>;
 }) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   // Temporarily defaulting to `accept-language`
   // This to be updated in FXA-9404
   //const locale = getLocaleFromRequest(
   //  params,
   //  headers().get('accept-language')
   //);
-  const locale = headers().get('accept-language') || DEFAULT_LOCALE;
+  const locale = (await headers()).get('accept-language') || DEFAULT_LOCALE;
 
   const cmsDataPromise = fetchCMSData(params.offeringId, locale);
   const cartDataPromise = getCartOrRedirectAction(

apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/new/page.tsx

@@ -13,19 +13,20 @@ interface CheckoutNewParams {
   interval: string;
 }
 
-export default async function CheckoutNew({
-  params,
-  searchParams,
-}: {
-  params: CheckoutNewParams;
-  searchParams: Record<string, string>;
+export default async function CheckoutNew(props: {
+  params: Promise<CheckoutNewParams>;
+  searchParams: Promise<Record<string, string>>;
 }) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const { offeringId, interval } = params;
   const { coupon } = searchParams;
   const session = await auth();
 
   const fxaUid = session?.user?.id;
-  const ip = (headers().get('x-forwarded-for') ?? '127.0.0.1').split(',')[0];
+  const ip = ((await headers()).get('x-forwarded-for') ?? '127.0.0.1').split(
+    ','
+  )[0];
 
   let cartId: string;
   try {

apps/payments/next/app/[locale]/error/auth/signin/page.tsx

@@ -21,17 +21,16 @@ interface ErrorAuthSigninSearchParams {
  * was attempting to reach.
  *
  */
-export default async function Error({
-  searchParams,
-}: {
-  searchParams: ErrorAuthSigninSearchParams;
+export default async function Error(props: {
+  searchParams: Promise<ErrorAuthSigninSearchParams>;
 }) {
+  const searchParams = await props.searchParams;
   const fallbackErrorPagePath = '/error';
 
   if (searchParams?.error !== 'OAuthCallbackError') {
     redirect(fallbackErrorPagePath);
   }
-  const cookieStore = cookies();
+  const cookieStore = await cookies();
   const redirectUrl = cookieStore.get('authjs.callback-url');
 
   if (redirectUrl?.value) {

apps/payments/next/app/[locale]/layout.tsx

@@ -18,8 +18,8 @@ export default async function RootProviderLayout({
   //  params,
   //  headers().get('accept-language')
   //);
-  const locale = headers().get('accept-language') || DEFAULT_LOCALE;
-  const nonce = headers().get('x-nonce') || undefined;
+  const locale = (await headers()).get('accept-language') || DEFAULT_LOCALE;
+  const nonce = (await headers()).get('x-nonce') || undefined;
   const fetchedMessages = getApp().getFetchedMessages(locale);
 
   return (

apps/payments/next/lib/utils/getCommonGleanMetrics.ts

@@ -1,12 +1,13 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-import { headers } from 'next/headers';
+import { headers, type UnsafeUnwrappedHeaders } from 'next/headers';
 import { userAgentFromString } from 'next/server';
 import { getIpAddress } from './getIpAddress';
 
 export function getCommonGleanMetrics() {
-  const userAgentString = headers().get('user-agent') || '';
+  const userAgentString =
+    (headers() as unknown as UnsafeUnwrappedHeaders).get('user-agent') || '';
   const userAgent = userAgentFromString(userAgentString);
   return {
     ipAddress: getIpAddress(),

apps/payments/next/lib/utils/getIpAddress.ts

@@ -2,8 +2,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import 'server-only';
-import { headers } from 'next/headers';
+import { headers, type UnsafeUnwrappedHeaders } from 'next/headers';
 
 export function getIpAddress() {
-  return (headers().get('x-forwarded-for') ?? '127.0.0.1').split(',')[0];
+  return (
+    (headers() as unknown as UnsafeUnwrappedHeaders).get('x-forwarded-for') ??
+    '127.0.0.1'
+  ).split(',')[0];
 }

libs/payments/ui/src/lib/actions/fetchCMSData.ts

@@ -8,7 +8,10 @@ import { plainToClass } from 'class-transformer';
 import { getApp } from '../nestapp/app';
 import { FetchCMSDataArgs } from '../nestapp/validators/FetchCMSDataArgs';
 
-export const fetchCMSData = (offeringId: string, acceptLanguage: string) => {
+export const fetchCMSData = async (
+  offeringId: string,
+  acceptLanguage: string
+) => {
   return getApp().getActionsService().fetchCMSData(
     plainToClass(FetchCMSDataArgs, {
       offeringId,

libs/payments/ui/src/lib/actions/recordEmitterEvent.ts

@@ -12,20 +12,20 @@ import { PaymentsEmitterEventsKeysType } from '../emitter/emitter.types';
 
 async function recordEmitterEventAction(
   eventName: PaymentsEmitterEventsKeysType,
-  params: Record<string, string | string[]>,
+  params: Record<string, string | string[] | undefined>,
   searchParams: Record<string, string>
 ): Promise<void>;
 
 async function recordEmitterEventAction(
   eventName: 'checkoutSubmit' | 'checkoutSuccess' | 'checkoutFail',
-  params: Record<string, string | string[]>,
+  params: Record<string, string | string[] | undefined>,
   searchParams: Record<string, string>,
   paymentProvider: PaymentProvidersType
 ): Promise<void>;
 
 async function recordEmitterEventAction(
   eventName: PaymentsEmitterEventsKeysType,
-  params: Record<string, string | string[]>,
+  params: Record<string, string | string[] | undefined>,
   searchParams: Record<string, string>,
   paymentProvider?: PaymentProvidersType
 ) {

libs/payments/ui/src/lib/utils/getAdditionalRequestArgs.ts

@@ -2,12 +2,13 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import 'server-only';
-import { headers } from 'next/headers';
+import { headers, type UnsafeUnwrappedHeaders } from 'next/headers';
 import { userAgentFromString } from 'next/server';
 import { getIpAddress } from './getIpAddress';
 
 export function getAdditionalRequestArgs() {
-  const userAgentString = headers().get('user-agent') || '';
+  const userAgentString =
+    (headers() as unknown as UnsafeUnwrappedHeaders).get('user-agent') || '';
   const userAgent = userAgentFromString(userAgentString);
   return {
     ipAddress: getIpAddress(),

libs/payments/ui/src/lib/utils/getIpAddress.ts

@@ -2,8 +2,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 import 'server-only';
-import { headers } from 'next/headers';
+import { headers, type UnsafeUnwrappedHeaders } from 'next/headers';
 
 export function getIpAddress() {
-  return (headers().get('x-forwarded-for') ?? '127.0.0.1').split(',')[0];
+  return (
+    (headers() as unknown as UnsafeUnwrappedHeaders).get('x-forwarded-for') ??
+    '127.0.0.1'
+  ).split(',')[0];
 }

package.json

@@ -105,7 +105,7 @@
     "mysql2": "^3.9.8",
     "nest-typed-config": "^2.9.2",
     "nest-winston": "^1.10.0",
-    "next": "^14.2.14",
+    "next": "15.0.1",
     "next-auth": "beta",
     "node-fetch": "^2.6.7",
     "node-hkdf": "^0.0.2",
@@ -117,8 +117,8 @@
     "passport-jwt": "^4.0.1",
     "pm2": "^5.4.2",
     "prettier": "^2.6.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
     "react-ga4": "^2.1.0",
     "rxjs": "^7.8.1",
     "semver": "^7.6.3",
@@ -199,8 +199,8 @@
     "@types/passport": "^1.0.6",
     "@types/passport-http-bearer": "^1.0.36",
     "@types/passport-jwt": "^4",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "npm:[email protected].1",
+    "@types/react-dom": "npm:[email protected]",
     "@types/react-test-renderer": "^18",
     "@types/set-value": "^4",
     "@types/uuid": "^10.0.0",
@@ -211,7 +211,7 @@
     "esbuild": "^0.17.15",
     "esbuild-register": "^3.5.0",
     "eslint": "^7.32.0",
-    "eslint-config-next": "14.2.3",
+    "eslint-config-next": "15.0.1",
     "eslint-plugin-fxa": "workspace:*",
     "eslint-plugin-import": "2.30.0",
     "eslint-plugin-jest": "^27.6.0",
@@ -258,7 +258,7 @@
     "@graphql-typed-document-node/core": "3.2.0",
     "@svgr/webpack": "^8.0.1",
     "@types/node": "^20.11.1",
-    "@types/react": "^18",
+    "@types/react": "npm:[email protected]",
     "asn1.js": ">=5.4.1",
     "bn.js": "^5.2.1",
     "browserid-crypto": "https://github.com/mozilla-fxa/browserid-crypto.git#5979544d13eeb15a02d0b9a6a7a08a698d54d37d",
@@ -280,7 +280,8 @@
     "terser:>4.0.0 <5": ">=4.8.1",
     "terser:>5 <6": ">=5.14.2",
     "underscore": ">=1.13.2",
-    "@sentry/types": "^7.113.0"
+    "@sentry/types": "^7.113.0",
+    "@types/react-dom": "npm:[email protected]"
   },
   "packageManager": "[email protected]",
   "_moduleAliases": {

packages/fxa-admin-panel/src/components/PageAccountSearch/Account/index.tsx

@@ -386,7 +386,6 @@ export const Account = ({
           </p>
         )}
       </section>
-
       <DangerZone
         {...{
           uid,

packages/fxa-content-server/app/scripts/lib/app-start.js

@@ -809,8 +809,7 @@ Start.prototype = {
         // verification
         this._isOAuthVerificationSameBrowser()
       ) ||
-      this._isOAuthVerificationDifferentBrowser() ||
-      // any URL with 'oauth' in the path.
+      this._isOAuthVerificationDifferentBrowser() || // any URL with 'oauth' in the path.
       /oauth/.test(this._window.location.pathname)
     );
   },

packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx

@@ -63,15 +63,11 @@ export const PlanUpgradeDetails = ({
       <p className="plan-label current-plan-label">
         <Localized id="sub-update-current-plan-label">Current plan</Localized>
       </p>
-
       <PlanDetailsCard className="from-plan" plan={upgradeFromPlan} />
-
       <p className="plan-label new-plan-label">
         <Localized id="sub-update-new-plan-label">New plan</Localized>
       </p>
-
       <PlanDetailsCard className="to-plan" plan={selectedPlan} />
-
       <div className="py-6 border-t-0">
         {showTax && !!subTotal && !!exclusiveTaxRates.length && (
           <>

packages/fxa-settings/src/components/Settings/FlowContainer/index.tsx

@@ -36,7 +36,6 @@ export const FlowContainer = ({
       data-testid="flow-container"
     >
       <Head title={title} />
-
       <div className="relative flex items-center">
         <button
           onClick={onBackButtonClick}

packages/fxa-settings/src/pages/Pair/AuthTotp/index.tsx

@@ -70,7 +70,6 @@ const AuthTotp = ({
         headingText="Enter authentication code"
         {...{ serviceName }}
       />
-
       <main>
         <div className="flex justify-center mx-auto">
           <TwoFactorAuthImage className="w-3/5" />