Upgrade many JS libraries

src/frontend/jest.config.js

@@ -15,7 +15,7 @@ module.exports = {
   },
   resolver: '<rootDir>/jest/resolver.js',
   transformIgnorePatterns: [
-    'node_modules/(?!(react-intl|lodash-es|@hookform/resolvers|query-string|decode-uri-component|split-on-first|filter-obj|@openfun/cunningham-react)/)',
+    'node_modules/(?!(react-intl|lodash-es|@hookform/resolvers|query-string|decode-uri-component|split-on-first|filter-obj|@openfun/cunningham-react|uuid|@formatjs|intl-messageformat)/)',
   ],
   globals: {
     RICHIE_VERSION: 'test',

src/frontend/jest/setup.ts

@@ -19,7 +19,7 @@ if (!globalThis.TextEncoder || !globalThis.TextDecoder) {
  * A little trick to prevent so package to be reset when using `jest.resetModules()`.
  * https://github.com/facebook/jest/issues/8987#issuecomment-584898030
  */
-const RESET_MODULE_EXCEPTIONS = ['react', 'react-intl'];
+const RESET_MODULE_EXCEPTIONS: string[] = [];
 
 const mockActualRegistry: Record<PropertyKey, any> = {};
 

src/frontend/js/components/Form/Form/index.tsx

@@ -1,8 +1,10 @@
 import c from 'classnames';
 import { PropsWithChildren } from 'react';
 
-interface FormProps
-  extends React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {}
+interface FormProps extends React.DetailedHTMLProps<
+  React.FormHTMLAttributes<HTMLFormElement>,
+  HTMLFormElement
+> {}
 
 const Form = ({ children, onSubmit, className, name, noValidate = true }: FormProps) => {
   return (

src/frontend/js/hooks/useAddressesManagement.tsx

@@ -2,6 +2,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { MutateOptions } from '@tanstack/react-query';
 import { useAddresses } from 'hooks/useAddresses';
 import * as Joanie from 'types/Joanie';
+import { HttpError } from 'utils/errors/HttpError';
 import { confirm } from 'utils/indirection/window';
 
 const messages = defineMessages({
@@ -58,7 +59,7 @@ export function useAddressesManagement() {
    * @param {Joanie.Address} address
    * @param {AddressesMutateOptions} options
    */
-  const remove = (address: Joanie.Address, options?: MutateOptions) => {
+  const remove = (address: Joanie.Address, options?: MutateOptions<void, HttpError, void, unknown>) => {
     if (address.is_main) {
       addresses.methods.setError(intl.formatMessage(messages.errorCannotRemoveMain));
       return;

src/frontend/js/hooks/useCreditCards/index.ts

@@ -1,6 +1,5 @@
 import { defineMessages, useIntl } from 'react-intl';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { MutateOptions } from '@tanstack/query-core';
+import { MutateOptions, useMutation, useQueryClient } from '@tanstack/react-query';
 import { API, CreditCard } from 'types/Joanie';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { useSessionMutation } from 'utils/react-query/useSessionMutation';
@@ -87,7 +86,7 @@ const useCreditCardResources =
     const deleteMutateAsync = async (creditCard: CreditCard, options?: MutateOptions) => {
       return custom.methods.delete(creditCard.id, {
         ...options,
-        onError: (error: HttpError, variables, context) => {
+        onError: (error: HttpError, variables, context, mutationContext) => {
           if (error.code === HttpStatusCode.CONFLICT) {
             custom.methods.setError(
               intl.formatMessage(messages.errorCannotDelete, {
@@ -97,7 +96,7 @@ const useCreditCardResources =
           } else {
             custom.methods.setError(intl.formatMessage(messages.errorDelete));
           }
-          options?.onError?.(error, variables, context);
+          options?.onError?.(error, variables, context, mutationContext);
         },
       });
     };

src/frontend/js/hooks/useResources/useResourcesRoot.ts

@@ -1,7 +1,6 @@
-import { useMutation, useQuery, useQueryClient, UseQueryResult } from '@tanstack/react-query';
+import { MutateOptions, useMutation, useQuery, useQueryClient, UseQueryResult } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { MutateOptions } from '@tanstack/query-core/src/types';
 import { AddParameters, Maybe } from 'types/utils';
 import { HttpError } from 'utils/errors/HttpError';
 import { useSessionQuery } from 'utils/react-query/useSessionQuery';

src/frontend/js/hooks/useUnionResource/index.ts

@@ -35,8 +35,12 @@ export interface ResourceUnionPaginationProps {
   perPage?: number;
 }
 
-interface UseUnionResourceProps<DataA, DataB, FiltersA, FiltersB>
-  extends ResourceUnionPaginationProps {
+interface UseUnionResourceProps<
+  DataA,
+  DataB,
+  FiltersA,
+  FiltersB,
+> extends ResourceUnionPaginationProps {
   queryAConfig: QueryConfig<DataA, FiltersA>;
   queryBConfig: QueryConfig<DataB, FiltersB>;
   errorGetMessage?: MessageDescriptor;

src/frontend/js/utils/react-query/useSessionMutation/index.ts

@@ -18,13 +18,14 @@ export function useSessionMutation<TData = unknown, TVariables = void, TContext
     error: HttpError,
     variables: TVariables,
     context: TContext | undefined,
+    mutationContext?: any,
   ) => {
     if (error.code === HttpStatusCode.UNAUTHORIZED) {
       await queryClient.invalidateQueries({ queryKey: ['user'], exact: true });
     }
 
     if (options?.onError) {
-      return options.onError(error, variables, context);
+      return options.onError(error, variables, context, mutationContext);
     }
   };
 

src/frontend/js/widgets/Dashboard/hooks/useRouteInfo/index.spec.tsx

@@ -35,6 +35,7 @@ describe('useRouteInfo', () => {
     await waitFor(() =>
       expect(result!.current).toEqual({
         id: '0',
+        loaderData: { posts: [] },
         pathname: '/posts',
         params: {},
         data: { posts: [] },

src/frontend/package.json

@@ -50,107 +50,108 @@
     "@formatjs/cli": "6.6.2",
     "@formatjs/intl-relativetimeformat": "11.4.11",
     "@hookform/resolvers": "4.1.3",
-    "@lyracom/embedded-form-glue": "1.4.2",
-    "@mui/material": "^7.3.2",
+    "@lyracom/embedded-form-glue": "1.4.4",
+    "@mui/material": "7.3.6",
     "@openfun/cunningham-react": "3.0.0",
     "@openfun/cunningham-tokens": "2.2.0",
     "@sentry/browser": "9.8.0",
     "@sentry/types": "9.8.0",
     "@storybook/addon-actions": "8.6.8",
-    "@storybook/addon-essentials": "8.6.8",
-    "@storybook/addon-interactions": "8.6.8",
-    "@storybook/addon-links": "8.6.8",
-    "@storybook/react": "8.6.8",
-    "@storybook/react-webpack5": "8.6.8",
-    "@storybook/test": "8.6.8",
-    "@tanstack/query-core": "5.69.0",
-    "@tanstack/query-sync-storage-persister": "5.69.0",
-    "@tanstack/react-query": "5.69.0",
-    "@tanstack/react-query-devtools": "5.69.0",
-    "@tanstack/react-query-persist-client": "5.69.0",
-    "@testing-library/dom": "10.4.0",
+    "@storybook/addon-essentials": "8.6.15",
+    "@storybook/addon-interactions": "8.6.15",
+    "@storybook/addon-links": "8.6.15",
+    "@storybook/blocks": "8.6.15",
+    "@storybook/react": "8.6.15",
+    "@storybook/react-webpack5": "8.6.15",
+    "@storybook/test": "8.6.15",
+    "@tanstack/query-core": "^5.90.20",
+    "@tanstack/query-sync-storage-persister": "^5.90.22",
+    "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-query-devtools": "^5.91.2",
+    "@tanstack/react-query-persist-client": "^5.90.22",
+    "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.2.0",
+    "@testing-library/react": "16.3.1",
     "@testing-library/user-event": "14.6.1",
     "@types/fetch-mock": "9.2.2",
     "@types/iframe-resizer": "4.0.0",
     "@types/jest": "29.5.14",
     "@types/js-cookie": "3.0.6",
     "@types/lodash-es": "4.17.12",
-    "@types/node-fetch": "2.6.12",
+    "@types/node-fetch": "2.6.13",
     "@types/query-string": "6.3.0",
-    "@types/react": "19.0.12",
+    "@types/react": "^19.2.10",
     "@types/react-autosuggest": "10.1.11",
-    "@types/react-dom": "19.0.4",
+    "@types/react-dom": "^19.2.3",
     "@types/react-modal": "3.16.3",
     "@typescript-eslint/eslint-plugin": "8.27.0",
     "@typescript-eslint/parser": "8.27.0",
     "babel-jest": "29.7.0",
-    "babel-loader": "10.0.0",
+    "babel-loader": "^10.0.0",
     "babel-plugin-react-intl": "8.2.25",
     "bootstrap": ">=4.6.0 <5",
     "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
-    "core-js": "3.41.0",
-    "downshift": "9.0.9",
+    "core-js": "3.47.0",
+    "downshift": "^9.2.0",
     "embla-carousel-autoplay": "8.6.0",
     "embla-carousel-react": "8.5.2",
     "embla-carousel-wheel-gestures": "8.0.1",
     "eslint": ">=8.57.0 <9",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
-    "eslint-config-prettier": "10.1.1",
+    "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-compat": "6.0.2",
     "eslint-plugin-formatjs": "5.3.0",
-    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.2.4",
-    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-storybook": "0.11.6",
     "fetch-mock": "<10",
-    "file-loader": "6.2.0",
+    "file-loader": "^6.2.0",
     "glob": "11.0.1",
     "i18n-iso-countries": "7.14.0",
     "iframe-resizer": "<5",
     "intl-pluralrules": "2.0.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "js-cookie": "3.0.5",
-    "lodash-es": "4.17.21",
+    "lodash-es": "4.17.22",
     "mdn-polyfills": "5.20.0",
     "msw": "2.7.3",
     "node-fetch": ">2.6.6 <3",
-    "nodemon": "3.1.9",
-    "prettier": "3.5.3",
-    "query-string": "9.1.1",
-    "react": "19.0.0",
+    "nodemon": "3.1.11",
+    "prettier": "^3.8.1",
+    "query-string": "9.3.1",
+    "react": "^19.2.4",
     "react-autosuggest": "10.1.0",
-    "react-dom": "19.0.0",
-    "react-hook-form": "7.54.2",
-    "react-intl": "7.1.9",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.71.1",
+    "react-intl": "^8.1.1",
     "react-modal": "3.16.3",
-    "react-router": "7.4.0",
-    "sass": "1.86.0",
+    "react-router": "^7.13.0",
+    "sass": "1.97.2",
     "source-map-loader": "5.0.0",
-    "storybook": "8.6.8",
-    "tsconfig-paths-webpack-plugin": "4.2.0",
-    "typescript": "5.8.2",
-    "uuid": "11.1.0",
-    "webpack": "5.98.0",
+    "storybook": "8.6.15",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "typescript": "^5.9.3",
+    "uuid": "^13.0.0",
+    "webpack": "5.104.1",
     "webpack-cli": "6.0.1",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
     "yargs": "17.7.2",
-    "yup": "1.6.1"
+    "yup": "^1.7.1"
   },
   "resolutions": {
-    "@testing-library/dom": "10.4.0",
-    "@types/react": "19.0.12",
-    "@types/react-dom": "19.0.4",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "@testing-library/dom": "10.4.1",
+    "@types/react": "19.2.10",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
   },
   "msw": {
     "workerDirectory": "../richie/static/richie/js"
@@ -160,7 +161,7 @@
     "yarn": "1.22.22"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.6.8",
+    "@storybook/addon-mdx-gfm": "8.6.14",
     "@storybook/addon-webpack5-compiler-babel": "3.0.5"
   }
 }