chore: upgrade build deps (#661)

* chore: upgrade build dependencies

* chore: add bundle analysis script

* chore: upgrade sentry deps

* chore: upgrade node types

* docs: declare new engine versions

apps/client/package.json

@@ -2,6 +2,7 @@
   "name": "ontime-ui",
   "version": "3.0.0-alpha",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@chakra-ui/react": "^2.7.0",
     "@dnd-kit/core": "^6.0.8",
@@ -10,8 +11,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@react-icons/all-files": "^4.1.0",
-    "@sentry/react": "^7.46.0",
-    "@sentry/tracing": "^7.46.0",
+    "@sentry/react": "^7.88.0",
     "@tanstack/react-query": "^5.8.4",
     "@tanstack/react-query-devtools": "^5.8.4",
     "@tanstack/react-table": "^8.9.2",
@@ -44,7 +44,8 @@
     "lint-staged": "eslint",
     "test": "vitest",
     "test:pipeline": "vitest run",
-    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"
+    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build",
+    "analyse": "npx vite-bundle-visualizer"
   },
   "browserslist": {
     "production": [
@@ -59,7 +60,7 @@
     ]
   },
   "devDependencies": {
-    "@sentry/vite-plugin": "^0.4.0",
+    "@sentry/vite-plugin": "^2.10.2",
     "@tanstack/eslint-plugin-query": "^5.8.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.1.1",
@@ -70,7 +71,7 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.6.0",
@@ -85,10 +86,10 @@
     "prettier": "^3.0.3",
     "sass": "^1.57.1",
     "typescript": "^5.2.2",
-    "vite": "^4.3.1",
-    "vite-plugin-compression2": "^0.9.0",
-    "vite-plugin-svgr": "^2.4.0",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.30.1"
+    "vite": "^5.0.10",
+    "vite-plugin-compression2": "^0.11.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.2.2",
+    "vitest": "^1.0.4"
   }
 }

apps/client/src/common/components/state/Empty.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 
-import { ReactComponent as Emptyimage } from '@/assets/images/empty.svg';
+import EmptyImage from '../../../assets/images/empty.svg?react';
 
 import style from './Empty.module.scss';
 
@@ -13,7 +13,7 @@ export default function Empty(props: EmptyProps) {
   const { text, ...rest } = props;
   return (
     <div className={style.emptyContainer} {...rest}>
-      <Emptyimage className={style.empty} />
+      <EmptyImage className={style.empty} />
       <span className={style.text}>{text}</span>
     </div>
   );

apps/client/src/features/modals/about-modal/AboutModal.tsx

@@ -1,8 +1,7 @@
 import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react';
 
-import { ReactComponent as OntimeLogo } from '@/assets/images/ontime-logo.svg';
-
 import { version } from '../../../../package.json';
+import OntimeLogo from '../../../assets/images/ontime-logo.svg?react';
 import { gitbookUrl, githubUrl } from '../../../externals';
 import ModalLink from '../ModalLink';
 

apps/client/src/index.tsx

@@ -2,7 +2,6 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 // skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
-import { BrowserTracing } from '@sentry/tracing';
 
 import App from './App';
 import { ONTIME_VERSION } from './ONTIME_VERSION';
@@ -39,7 +38,7 @@ const sentryRecommendedIgnore = [
 
 Sentry.init({
   dsn: 'https://5e4d2c4b57ab409cb98d4c08b2014755@o4504288369836032.ingest.sentry.io/4504288371343360',
-  integrations: [new BrowserTracing()],
+  integrations: [new Sentry.BrowserTracing()],
   tracesSampleRate: 0.3,
   release: ONTIME_VERSION,
   enabled: import.meta.env.PROD,