[WIP] upgrade packages

package.json

@@ -3,68 +3,71 @@
   "version": "6.2.4",
   "private": true,
   "type": "module",
+  "license": {
+    "type": "AGPL-3.0",
+    "url": "https://github.com/glific/glific-frontend?tab=AGPL-3.0-1-ov-file#readme"
+  },
   "dependencies": {
-    "@apollo/client": "^3.11.8",
+    "@apollo/client": "^3.12.9",
     "@apollo/link-context": "^2.0.0-beta.3",
     "@apollo/link-error": "^2.0.0-beta.3",
-    "@appsignal/javascript": "^1.3.31",
+    "@appsignal/javascript": "^1.5.0",
     "@appsignal/plugin-breadcrumbs-network": "^1.1.22",
     "@appsignal/plugin-path-decorator": "^1.0.16",
-    "@appsignal/plugin-window-events": "^1.0.22",
-    "@appsignal/react": "^1.0.26",
-    "@date-io/dayjs": "^3.0.0",
+    "@appsignal/plugin-window-events": "^1.0.24",
+    "@appsignal/react": "^1.0.29",
+    "@date-io/dayjs": "^3.2.0",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@glific/flow-editor": "^1.26.3-18",
-    "@lexical/react": "^0.17.1",
-    "@mui/icons-material": "^6.1.1",
-    "@mui/material": "^6.1.1",
-    "@mui/x-date-pickers": "^7.18.0",
-    "@nyaruka/temba-components": "^0.108.1",
-    "@stripe/react-stripe-js": "^2.8.0",
-    "@stripe/stripe-js": "^4.5.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@lexical/react": "^0.23.1",
+    "@mui/icons-material": "^6.4.3",
+    "@mui/material": "^6.4.3",
+    "@mui/x-date-pickers": "^7.25.0",
+    "@nyaruka/temba-components": "^0.118.2",
+    "@stripe/react-stripe-js": "^3.1.1",
+    "@stripe/stripe-js": "^5.6.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "apollo-absinthe-upload-link": "^1.7.0",
     "apollo-link-token-refresh": "^0.7.0",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "buffer": "^6.0.3",
     "dayjs": "^1.11.13",
     "emoji-mart": "^5.6.0",
     "formik": "^2.4.6",
-    "graphql": "^16.9.0",
-    "graphql-ws": "^5.16.0",
-    "i18next": "^23.15.1",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "graphql": "^16.10.0",
+    "graphql-ws": "^6.0.3",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.2",
     "interweave": "^13.1.0",
     "interweave-autolink": "^5.1.1",
-    "lexical": "^0.17.1",
-    "lexical-beautiful-mentions": "^0.1.41",
-    "pino": "^9.4.0",
+    "lexical": "^0.23.1",
+    "lexical-beautiful-mentions": "^0.1.46",
+    "pino": "^9.6.0",
     "pino-logflare": "^0.4.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-draggable": "^4.4.6",
     "react-google-recaptcha-v3": "^1.10.1",
-    "react-i18next": "^15.0.2",
+    "react-i18next": "^15.4.0",
     "react-image": "^4.1.0",
     "react-media-recorder": "^1.7.1",
     "react-phone-input-2": "^2.15.1",
     "react-player": "^2.16.0",
-    "react-resize-detector": "^11.0.1",
-    "react-router-dom": "^6.26.2",
+    "react-resize-detector": "^12.0.2",
+    "react-router-dom": "^7.1.5",
     "react-tiny-link": "^3.6.1",
     "react-viewer": "^3.2.2",
-    "rollup-plugin-polyfill-node": "^0.13.0",
     "stream-browserify": "^3.0.0",
     "util": "^0.12.5",
-    "uuid": "^10.0.0",
-    "vite": "^5.4.8",
+    "uuid": "^11.0.5",
+    "vite": "^6.1.0",
     "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^5.0.1",
-    "yup": "^1.4.0"
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "yup": "^1.6.1"
   },
   "scripts": {
     "setup": "yarn install --force && yarn run floweditor",
@@ -99,33 +102,34 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/emoji-mart": "^3.0.14",
-    "@types/node": "^22.7.2",
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^22.13.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-test-renderer": "^18.3.0",
+    "@types/react-test-renderer": "^19.0.0",
     "@types/uuid": "^10.0.0",
-    "@vitest/coverage-istanbul": "^2.1.1",
-    "@vitest/ui": "^2.1.1",
+    "@vitest/coverage-istanbul": "^3.0.5",
+    "@vitest/ui": "^3.0.5",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "i18next-parser": "^9.0.2",
-    "jsdom": "^25.0.1",
-    "prettier": "^3.3.3",
-    "react-test-renderer": "^18.3.1",
-    "typescript": "^5.6.2",
-    "vitest": "^2.1.1",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "i18next-parser": "^9.1.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.4.2",
+    "react-test-renderer": "^19.0.0",
+    "typescript": "^5.7.3",
+    "vite-plugin-node-polyfills": "^0.23.0",
+    "vitest": "^3.0.5",
     "yarn-upgrade-all": "^0.7.4"
   }
 }

src/components/UI/ImgFallback/ImgFallback.tsx

@@ -10,7 +10,7 @@ type ImgProps = {
 
 const ImgFallback = ({ src, alt, ...rest }: ImgProps) => {
   const [imgSrc, setImgSrc] = useState<string>(src);
-  const imgRef: any = useRef<HTMLImageElement>();
+  const imgRef = useRef<HTMLImageElement>(null);
 
   useEffect(() => {
     setImgSrc(src);

src/components/UI/ListIcon/ListIcon.test.tsx

@@ -1,21 +1,9 @@
 import { MemoryRouter } from 'react-router';
 import { render } from '@testing-library/react';
 
-import ChatIcon from 'assets/images/icons/SideDrawer/ChatIcon';
-import FlowIcon from 'assets/images/icons/SideDrawer/FlowIcon';
-import SearchIcon from 'assets/images/icons/SideDrawer/SearchIcon';
-import SpeedSendIcon from 'assets/images/icons/SideDrawer/SpeedSendIcon';
-import TemplateIcon from 'assets/images/icons/SideDrawer/TemplateIcon';
 import { ListIcon } from './ListIcon';
 
 describe('list icon tests', () => {
-  const iconList: { [iconName: string]: (color: { color: any }) => JSX.Element } = {
-    chat: ChatIcon,
-    flow: FlowIcon,
-    search: SearchIcon,
-    'speed-send': SpeedSendIcon,
-    template: TemplateIcon,
-  };
   const createIcon = (type: string) => (
     <MemoryRouter>
       <ListIcon icon={type} />

src/global.ts

@@ -1,6 +1 @@
-import { Buffer } from 'buffer';
-import Process from 'process';
-
-globalThis.process = Process;
-globalThis.Buffer = Buffer;
 document.title = import.meta.env.VITE_APPLICATION_NAME;

vite.config.ts

@@ -7,51 +7,43 @@ import viteTsconfigPaths from 'vite-tsconfig-paths';
 import checker from 'vite-plugin-checker';
 import svgrPlugin from 'vite-plugin-svgr';
 import fs from 'fs';
-import nodePolyfills from 'rollup-plugin-polyfill-node';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 // https://vitejs.dev/config/
 export default ({ command, mode }: ConfigEnv): UserConfigExport => {
+  const nodePolyfillsOptions = {
+    globals: {
+      Buffer: true,
+      global: true,
+      process: true,
+    },
+  };
+
+  const plugins = [react(), viteTsconfigPaths(), svgrPlugin(), nodePolyfills(nodePolyfillsOptions)];
+
+  const esbuildOptions = {
+    // Node.js global to browser globalThis
+    define: {
+      global: 'globalThis',
+    },
+  };
+
+  // dev in test mode config
   if (mode === 'test' && command === 'serve') {
     return defineConfig({
-      // dev specific config
-      plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
-
+      plugins: plugins,
       optimizeDeps: {
-        esbuildOptions: {
-          // Node.js global to browser globalThis
-          define: {
-            global: 'globalThis',
-          },
-        },
-      },
-
-      resolve: { alias: { util: 'util/' } },
-      test: {
-        globals: true,
-        environment: 'jsdom',
-        setupFiles: './src/setupTests.ts',
-        coverage: {
-          reporter: ['lcov', 'text', 'html'],
-          // choosing istanbul for now because of this https://github.com/vitest-dev/vitest/issues/1252
-          provider: 'istanbul', // or 'c8',
-          include: ['src/**/**'],
-          exclude: ['node_modules/', '**/*.test.tsx', './src/assets/**'],
-        },
-        css: true,
+        esbuildOptions: esbuildOptions,
       },
     });
   }
+
+  // dev specific config
   if (command === 'serve') {
     return defineConfig({
-      // dev specific config
-      plugins: [react(), viteTsconfigPaths(), svgrPlugin(), checker({ typescript: true })],
+      plugins: plugins.concat([checker({ typescript: true })]),
       optimizeDeps: {
-        esbuildOptions: {
-          // Node.js global to browser globalThis
-          define: {
-            global: 'globalThis',
-          },
-        },
+        esbuildOptions: esbuildOptions,
       },
       server: {
         open: true,
@@ -69,42 +61,17 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
           'Strict-Transport-Security': 'max-age=63072000; includeSubdomains; preload',
         },
       },
-      resolve: { alias: { util: 'util/', stream: 'stream-browserify' } }, // stream polyfill is needed by logflare
     });
   }
+
   // command === 'build'
   return defineConfig({
     optimizeDeps: {
-      esbuildOptions: {
-        // Node.js global to browser globalThis
-        define: {
-          global: 'globalThis',
-        },
-      },
+      esbuildOptions: esbuildOptions,
     },
-    // build specific config
-    plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
+    plugins: plugins,
     build: {
-      // this is needed because of this https://github.com/vitejs/vite/issues/2139#issuecomment-1405624744
-      commonjsOptions: {
-        defaultIsModuleExports(id) {
-          try {
-            const module = require(id);
-            if (module?.default) {
-              return false;
-            }
-            return 'auto';
-          } catch (error) {
-            return 'auto';
-          }
-        },
-        transformMixedEsModules: true,
-      },
       outDir: 'build',
-      rollupOptions: {
-        plugins: [nodePolyfills('buffer', 'process')],
-      },
     },
-    resolve: { alias: { util: 'util/', stream: 'stream-browserify' } },
   });
 };

vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/setupTests.ts',
+    coverage: {
+      reporter: ['lcov', 'text', 'html'],
+      // choosing istanbul for now because of this https://github.com/vitest-dev/vitest/issues/1252
+      provider: 'istanbul', // or 'c8',
+      include: ['src/**/**'],
+      exclude: ['node_modules/', '**/*.test.tsx', './src/assets/**'],
+    },
+    css: true,
+  },
+});