Update front package versions with node 22 + fixes for vite 6 & react 19

.nvmrc

@@ -1 +1 @@
-v20.11
+v22.13.0

apps/front/package.json

@@ -22,40 +22,40 @@
   "dependencies": {
     "@cher-ami/css-flat": "^1.0.1",
     "@cher-ami/debug": "^1.2.0",
-    "@cher-ami/router": "^3.5.0",
+    "@cher-ami/router": "^3.5.4",
     "@cher-ami/utils": "^1.4.1",
-    "cross-fetch": "^4.0.0",
+    "cross-fetch": "^4.1.0",
     "history": "^5.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@cher-ami/mfs": "^0.2.0",
     "@types/events": "^3.0.3",
-    "@types/node": "^20.11.16",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
-    "@vitejs/plugin-legacy": "^5.3.0",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "autoprefixer": "^10.4.17",
-    "chalk": "^5.3.0",
-    "compression": "^1.7.4",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-legacy": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "autoprefixer": "^10.4.20",
+    "chalk": "^5.4.1",
+    "compression": "^1.7.5",
     "cross-env": "^7.0.3",
-    "express": "^4.18.2",
-    "husky": "^9.0.10",
-    "ip": "^1.1.8",
+    "express": "^4.21.2",
+    "husky": "^9.1.7",
+    "ip": "^2.0.1",
     "portfinder-sync": "^0.0.2",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.70.0",
-    "sirv": "^2.0.4",
-    "terser": "^5.27.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12",
-    "vite-plugin-checker": "^0.6.4",
-    "vitest": "^1.2.2"
+    "rollup-plugin-visualizer": "^5.14.0",
+    "sass": "^1.83.1",
+    "sirv": "^3.0.0",
+    "terser": "^5.37.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vite-plugin-checker": "^0.8.0",
+    "vitest": "^2.1.8"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "4.6.1",
+    "@rollup/rollup-linux-x64-gnu": "4.30.1",
     "esbuild-android-arm64": "^0.15.18",
     "fsevents": "^2.3.3"
   },

apps/front/src/components/baseButton/BaseButton.tsx

@@ -1,4 +1,4 @@
-import React, { MutableRefObject } from "react"
+import React, { RefObject } from "react"
 import css from "./BaseButton.module.scss"
 import { Link, openRoute, TOpenRouteParams } from "@cher-ami/router"
 import { cls } from "@cher-ami/utils"
@@ -18,7 +18,7 @@ type TExternalLinkButton = {
 
 type IProps = {
   className?: string
-  label: string | JSX.Element
+  label: string | React.JSX.Element
   ariaLabel: string
   onClick?: () => void
   tag: "button" | "a"
@@ -46,7 +46,7 @@ const log = debug(`front:${componentName}`)
  *
  *
  */
-function BaseButton(props: IProps, ref: MutableRefObject<any>) {
+function BaseButton(props: IProps, ref: RefObject<any>) {
   const commonContent = (
     <div className={cls(css.wrapper)}>
       <div className={css.content}>{props.label}</div>

apps/front/src/components/noSSR/NoSSR.tsx

@@ -9,7 +9,7 @@ import { isBrowser } from "@cher-ami/utils"
  * @param children
  * @constructor
  */
-export const NoSSR = ({ children }): JSX.Element => {
+export const NoSSR = ({ children }): React.JSX.Element => {
   const [shouldRender, setShouldRender] = useState(false)
   useEffect(() => {
     setShouldRender(isBrowser())

apps/front/src/libs/core/CherScripts.tsx

@@ -1,13 +1,13 @@
 import * as React from "react"
 type TScript = { tag: string; attr: { [x: string]: string } }
 
-export const ScriptTag = ({ tag, attr }: TScript): JSX.Element => {
+export const ScriptTag = ({ tag, attr }: TScript): React.JSX.Element => {
   const T = tag
   // @ts-ignore
   if (attr.noModule === "") return <T {...attr} noModule />
   else return <T {...attr} />
 }
 
-export const CherScripts = ({ scripts }: { scripts: TScript[] }): JSX.Element => (
+export const CherScripts = ({ scripts }: { scripts: TScript[] }): React.JSX.Element => (
   <>{scripts?.map((script, i) => <ScriptTag key={i} {...script} />)}</>
 )

apps/front/vite.config.ts

@@ -83,6 +83,12 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
       },
       postcss: {
         plugins: [autoprefixer()]
+      },
+      preprocessorOptions: {
+        scss: {
+          api: "modern-compiler",
+          silenceDeprecations: ["legacy-js-api"] // Temporary before updating scss
+        }
       }
     },
 

cli/tasks/setup/setup.js

@@ -8,7 +8,7 @@ import config from "../../config.js"
 import path from "path"
 
 // TODO  assert { type: "json" } will change in the future
-import packageJson from "../../../package.json" assert { type: "json" }
+import packageJson from "../../../package.json" with { type: "json" }
 
 import debug from "@cher-ami/debug"
 const log = debug(`config:setup`)

docker-compose.yml

@@ -1,7 +1,6 @@
-version: "3.7"
 services:
   node:
-    image: node:20.11
+    image: node:22.13.0
     ports:
       - "${DOCKER_NODE_PORT:-5173}:5173" # vite dev server
       - "24678:24678" # vite HMR