deps: Update vite to 5.2.x (#551)

* deps: Update vite to 5.2.x

- Update vite related packages
- Update vite-plugin-svgr imports to satisfy 4.x.x requirements

package.json

@@ -47,7 +47,7 @@
     "@typescript-eslint/eslint-plugin": "7.8.0",
     "@typescript-eslint/parser": "7.8.0",
     "@typescript-eslint/scope-manager": "5.62.0",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "aws-cdk": "^2.111.0",
     "aws-cdk-lib": "^2.111.0",
     "babel-jest": "29.7.0",
@@ -81,10 +81,10 @@
     "tsconfig-paths": "^4.2.0",
     "tslib": "^2.6.2",
     "typescript": "5.4.5",
-    "vite": "^4.5.0",
+    "vite": "^5.2.11",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-svgr": "^3.3.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
     "@aws-sdk/client-cloudformation": "^3.462.0",

packages/webapp/jest.config.ts

@@ -9,6 +9,7 @@ export default {
   moduleNameMapper: {
     'react-markdown': '<rootDir>/node_modules/react-markdown/react-markdown.min.js',
     '^!!raw-loader!.*': 'jest-raw-loader',
+    '\\.svg\\?react$': '<rootDir>/src/tests/svgMock.ts',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageReporters: ['lcov'],

packages/webapp/package.json

@@ -47,9 +47,9 @@
     "@storybook/cli": "^8.0.9",
     "@storybook/client-api": "^7.6.17",
     "@storybook/client-logger": "^8.0.9",
-    "@storybook/react-vite": "^8.0.9",
+    "@storybook/react-vite": "^8.0.10",
     "@types/qrcode": "^1.5.5",
-    "@vitejs/plugin-legacy": "^4.1.1",
+    "@vitejs/plugin-legacy": "^5.4.0",
     "autoprefixer": "^10.4.16",
     "concurrently": "^7.6.0",
     "inquirer-directory": "^2.2.0",

packages/webapp/src/images/icons/index.ts

@@ -1,7 +1,9 @@
-import { ReactComponent as FacebookImg } from './facebook.svg';
-import { ReactComponent as GoogleImg } from './google.svg';
-import { ReactComponent as HeaderLogoImg } from './headerLogo.svg';
-import { ReactComponent as HeaderLogoDarkImg } from './headerLogoDark.svg';
+/// <reference types="vite-plugin-svgr/client" />
+import FacebookImg from './facebook.svg?react';
+import GoogleImg from './google.svg?react';
+import HeaderLogoImg from './headerLogo.svg?react';
+import HeaderLogoDarkImg from './headerLogoDark.svg?react';
+
 import { makeIcon } from './makeIcon';
 
 //<-- IMPORT ICON FILE -->

packages/webapp/src/tests/svgMock.ts

@@ -0,0 +1,2 @@
+export default 'svg';
+export const ReactComponent = 'div';

packages/webapp/vite.config.ts

@@ -33,7 +33,7 @@ export default defineConfig(({ mode }): UserConfig => {
         '/api': {
           target: 'http://localhost:5001',
           changeOrigin: true,
-          ws: true
+          ws: true,
         },
         '/static/graphene_django': {
           target: 'http://localhost:5001',
@@ -61,7 +61,11 @@ export default defineConfig(({ mode }): UserConfig => {
       viteTsConfigPaths({
         projects: ['../../tsconfig.base.json'],
       }),
-      svgr(),
+      svgr({
+        svgrOptions: { icon: true },
+        include: ['**/*.svg', '**/*.svg?react'],
+        exclude: [],
+      }),
       viteCommonjs(),
     ],