Merge pull request #666 from meza/renovate/major-remix-dependencies

fix(deps): update remix dependencies to v2 (major)

package.json

@@ -57,10 +57,10 @@
   "dependencies": {
     "@aws-sdk/smithy-client": "3.370.0",
     "@aws-sdk/types": "3.489.0",
-    "@remix-run/architect": "1.18.1",
-    "@remix-run/node": "1.18.1",
-    "@remix-run/react": "1.18.1",
-    "@remix-run/server-runtime": "1.18.1",
+    "@remix-run/architect": "2.4.1",
+    "@remix-run/node": "2.4.1",
+    "@remix-run/react": "2.4.1",
+    "@remix-run/server-runtime": "2.4.1",
     "@sentry/react": "7.93.0",
     "@sentry/remix": "7.93.0",
     "@sentry/serverless": "7.93.0",
@@ -71,7 +71,7 @@
     "cross-env": "7.0.3",
     "csp-header": "5.2.1",
     "esbuild": "0.19.11",
-    "i18next": "22.5.1",
+    "i18next": "23.7.16",
     "i18next-browser-languagedetector": "7.2.0",
     "i18next-fs-backend": "2.3.1",
     "i18next-http-backend": "2.4.2",
@@ -82,8 +82,8 @@
     "posthog-node": "3.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "12.3.1",
-    "remix-i18next": "5.1.1",
+    "react-i18next": "14.0.0",
+    "remix-i18next": "5.5.0",
     "typescript-cookie": "1.0.6",
     "uuid": "9.0.1",
     "vitest-dom": "0.1.1"
@@ -106,9 +106,9 @@
     "@jscpd/html-reporter": "3.5.10",
     "@meza/adr-tools": "1.0.10",
     "@playwright/test": "1.40.1",
-    "@remix-run/dev": "1.18.1",
-    "@remix-run/serve": "1.18.1",
-    "@remix-run/testing": "1.18.1",
+    "@remix-run/dev": "2.4.1",
+    "@remix-run/serve": "2.4.1",
+    "@remix-run/testing": "2.4.1",
     "@semantic-release/commit-analyzer": "11.1.0",
     "@semantic-release/github": "9.2.6",
     "@semantic-release/release-notes-generator": "12.1.0",

remix.config.js

@@ -43,12 +43,7 @@ withEsbuildOverride((option /* { isServer, isDev } */) => {
 
 /** @type {import('@remix-run/dev').AppConfig} */
 module.exports = {
-  future: {
-    unstable_postcss: true,
-    v2_errorBoundary: true,
-    v2_normalizeFormMethod: true,
-    v2_routeConvention: true
-  },
+  postcss: true,
   server: './server.js',
   serverMinify: true,
   ignoredRouteFiles: ['**/__snapshots__/**', '**/.*', '**/*.test.tsx', '**/*.test.ts'],

server/version.txt

@@ -0,0 +1 @@
+f4bd41e6

src/components/CookieConsent/index.test.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { redirect } from '@remix-run/node';
-import { unstable_createRemixStub as createRemixStub } from '@remix-run/testing';
+import { createRemixStub } from '@remix-run/testing';
 import { renderWithi18n } from '@test';
 import { render, waitFor, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -68,7 +68,7 @@ describe('The Cookie Consent Component', () => {
       const RemixStub = createRemixStub([
         {
           path: '/*',
-          element: <CookieConsentProvider><CookieConsentBanner/></CookieConsentProvider>
+          Component: () => <CookieConsentProvider><CookieConsentBanner/></CookieConsentProvider>
         }
       ]);
 
@@ -83,7 +83,7 @@ describe('The Cookie Consent Component', () => {
       const RemixStub = createRemixStub([
         {
           path: '/',
-          element: <CookieConsentProvider><CookieConsentBanner/></CookieConsentProvider>
+          Component: () => <CookieConsentProvider><CookieConsentBanner/></CookieConsentProvider>
         },
         {
           path: '/settings/cookie-consent',
@@ -117,7 +117,7 @@ describe('The Cookie Consent Component', () => {
       const RemixStub = createRemixStub([
         {
           path: '/',
-          element: <CookieConsentProvider
+          Component: () => <CookieConsentProvider
             consentData={
               {
                 analytics: analyticsState
@@ -138,7 +138,7 @@ describe('The Cookie Consent Component', () => {
       const RemixStub = createRemixStub([
         {
           path: '/',
-          element: <CookieConsentProvider><CookieConsentBanner/></CookieConsentProvider>
+          Component: () => <CookieConsentProvider><CookieConsentBanner/></CookieConsentProvider>
         }
       ]);
 

src/components/CookieConsent/index.tsx

@@ -72,6 +72,8 @@ export const CookieConsentBanner = () => {
     >
       <div id={id + '-header'} className={'cookie-consent-header'}><Cookie/>{t('cookieConsent.title')}</div>
       <div id={id + '-text'} className={'cookie-consent-text'}>{t('cookieConsent.disclaimer')}</div>
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-expect-error */}
       <fetcher.Form ref={acceptFormRef} action='/settings/cookie-consent' replace reloadDocument={true} method={'post'} id={formId + '-accept'}>
         <div className={'cookie-consent-switches'}>
           <div className={'cookie-consent-switch'}>
@@ -88,6 +90,8 @@ export const CookieConsentBanner = () => {
           </div>
         </div>
       </fetcher.Form>
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-expect-error */}
       <fetcher.Form action='/settings/cookie-consent' replace method={'post'} id={formId + '-deny'}>
         <input type={'hidden'} name={'analytics'} value={'false'}/>
         <input type={'hidden'} name={'marketing'} value={'false'}/>

src/entry.server.tsx

@@ -1,6 +1,5 @@
 import crypto from 'node:crypto';
 import React from 'react';
-import { Response } from '@remix-run/node';
 import { RemixServer } from '@remix-run/react';
 import { renderToString } from 'react-dom/server';
 import { I18nextProvider } from 'react-i18next';

src/root.test.tsx

@@ -52,11 +52,17 @@ describe('The root module', () => {
 
   it('should have a consistent meta function', () => {
     expect(meta({} as never)).toMatchInlineSnapshot(`
-      {
-        "charset": "utf-8",
-        "title": "REPL_APP_NAME",
-        "viewport": "width=device-width,initial-scale=1",
-      }
+      [
+        {
+          "charset": "utf-8",
+        },
+        {
+          "title": "REPL_APP_NAME",
+        },
+        {
+          "viewport": "width=device-width,initial-scale=1",
+        },
+      ]
     `);
   });
 
@@ -109,7 +115,7 @@ describe('The root module', () => {
 
     it('should return the app config for dev', async () => {
       const request = new Request('https://example.com');
-      const response = await loader({ request: request } as never);
+      const response = (await loader({ request: request } as never) as Response);
       const data = await response.json();
       expect(data).toMatchInlineSnapshot(`
         {
@@ -128,14 +134,14 @@ describe('The root module', () => {
 
     it('should set the cookie header', async () => {
       const request = new Request('https://example.com');
-      const response = await loader({ request: request } as never);
+      const response = (await loader({ request: request } as never) as Response);
       expect(response.headers.get('Set-Cookie')).toMatchInlineSnapshot('"a-cookie"');
     });
 
     it('should return the app config for prod', async () => {
       vi.stubEnv('NODE_ENV', 'production');
       const request = new Request('https://example.com');
-      const response = await loader({ request: request } as never);
+      const response = (await loader({ request: request } as never) as Response);
       const data = await response.json();
       expect(data).toMatchInlineSnapshot(`
         {

src/root.tsx

@@ -18,11 +18,15 @@ import { remixI18next } from '~/i18n';
 import { defaultNS } from '~/i18n/i18n.config';
 import { createUserSession } from '~/session.server';
 
-export const meta: MetaFunction = () => ({
-  charset: 'utf-8',
-  title: 'REPL_APP_NAME',
-  viewport: 'width=device-width,initial-scale=1'
-});
+export const meta: MetaFunction = () => ([
+  {
+    charset: 'utf-8'
+  }, {
+    title: 'REPL_APP_NAME'
+  }, {
+    viewport: 'width=device-width,initial-scale=1'
+  }
+]);
 
 export const links: LinksFunction = () => {
   return [
@@ -79,7 +83,10 @@ const App = () => {
             <Links/>
             <ExposeAppConfig appConfig={appConfig} nonce={nonce}/>
             <ColorModeSensor nonce={nonce}/>
-            <GoogleAnalytics googleAnalyticsId={appConfig.googleAnalyticsId} visitorId={appConfig.visitorId} nonce={nonce}/>
+            <GoogleAnalytics
+              googleAnalyticsId={appConfig.googleAnalyticsId}
+              visitorId={appConfig.visitorId}
+              nonce={nonce}/>
             <Hotjar hotjarId={appConfig.hotjarId} visitorId={appConfig.visitorId} nonce={nonce}/>
           </head>
           <body>

src/routes/auth.auth0.tsx

@@ -3,4 +3,5 @@ import { authenticator } from '~/auth.server';
 
 export const action: ActionFunction = () => {
   authenticator.authorize();
+  return null;
 };

src/routes/settings.cookie-consent.test.ts

@@ -69,7 +69,7 @@ describe('The cookie consent settings', () => {
 
     vi.mocked(commitSession).mockResolvedValue('mock-cookie');
 
-    const response = await action({ request: request } as never);
+    const response = (await action({ request: request } as never) as Response);
 
     expect(Object.fromEntries(response.headers.entries())).toMatchInlineSnapshot(`
       {