chore(web): upgrade & clean up some dependencies & fix errors (#1074)

web/package.json

@@ -8,7 +8,7 @@
     "private": true,
     "scripts": {
         "start": "yarn && vite",
-        "test": "vitest",
+        "test": "vitest run --reporter verbose",
         "coverage": "vitest --coverage",
         "e2e": "playwright test",
         "prepare": "cd .. && husky install web/.husky",
@@ -49,20 +49,20 @@
         "@storybook/react": "7.5.2",
         "@storybook/react-vite": "7.5.2",
         "@storybook/theming": "7.5.2",
-        "@testing-library/jest-dom": "6.1.4",
-        "@testing-library/react": "14.0.0",
-        "@testing-library/user-event": "14.5.1",
-        "@types/apollo-upload-client": "17.0.2",
+        "@testing-library/dom": "10.4.0",
+        "@testing-library/jest-dom": "6.4.8",
+        "@testing-library/react": "16.0.0",
+        "@testing-library/user-event": "14.5.2",
+        "@types/apollo-upload-client": "18.0.0",
         "@types/carbon__colors": "10.31.2",
         "@types/gapi.auth2": "0.0.59",
         "@types/gapi.client": "1.0.7",
         "@types/gapi.client.sheets": "4.0.20201031",
         "@types/google.picker": "0.0.41",
-        "@types/js-md5": "0.7.1",
         "@types/lodash-es": "4.17.10",
         "@types/mapbox__vector-tile": "1.3.3",
-        "@types/node": "20.8.10",
-        "@types/react": "18.2.6",
+        "@types/node": "20.14.12",
+        "@types/react": "18.3.3",
         "@types/react-beautiful-dnd": "13.1.8",
         "@types/react-dom": "18.2.6",
         "@types/react-ga": "2.3.0",
@@ -87,22 +87,22 @@
         "npm-run-all": "4.1.5",
         "prettier": "2.8.8",
         "read-env": "2.0.0",
-        "rollup": "4.2.0",
+        "rollup": "4.19.0",
         "rollup-plugin-visualizer": "5.9.2",
         "storybook": "7.5.2",
         "ts-node": "10.9.1",
         "type-fest": "4.6.0",
         "typescript": "5.0.4",
         "typescript-styled-plugin": "0.18.3",
-        "vite": "5.0.8",
+        "vite": "5.3.5",
         "vite-plugin-cesium": "1.2.22",
         "vite-plugin-svgr": "4.2.0",
         "vite-tsconfig-paths": "4.2.1",
-        "vitest": "1.0.4",
+        "vitest": "1.6.0",
         "web-streams-polyfill": "3.2.1"
     },
     "dependencies": {
-        "@apollo/client": "3.8.1",
+        "@apollo/client": "3.11.1",
         "@auth0/auth0-react": "2.2.2",
         "@aws-amplify/ui-react": "5.3.1",
         "@carbon/colors": "11.20.1",
@@ -118,72 +118,56 @@
         "@rot1024/use-transition": "1.0.0",
         "@sentry/browser": "7.77.0",
         "@seznam/compose-react-refs": "1.0.6",
-        "@turf/turf": "6.5.0",
-        "@types/d3": "7.4.3",
         "@types/escape-string-regexp": "2.0.1",
-        "@types/proj4": "^2.5.5",
-        "@ungap/event-target": "0.2.4",
-        "@xstate/react": "3.2.1",
         "apollo-link-sentry": "3.2.3",
-        "apollo-upload-client": "17.0.0",
+        "apollo-upload-client": "18.0.1",
         "array-move": "4.0.0",
         "aws-amplify": "5.3.11",
         "axios": "1.6.0",
-        "cesium": "1.116.0",
+        "cesium": "1.118.0",
         "cesium-dnd": "1.1.0",
         "cesium-mvt-imagery-provider": "1.4.0",
         "core-js": "3.33.2",
         "crypto-js": "4.2.0",
         "csv-parse": "5.5.2",
-        "d3": "7.8.5",
         "date-fns": "2.30.0",
         "dayjs": "1.11.10",
         "detect-browser": "5.3.0",
         "escape-string-regexp": "5.0.0",
-        "fast-xml-parser": "4.3.2",
         "formik": "2.4.5",
-        "framer-motion": "10.18.0",
         "github-markdown-css": "5.4.0",
         "graphiql": "2.4.4",
         "graphql": "16.6.0",
         "i18next": "22.4.15",
         "i18next-browser-languagedetector": "7.0.1",
         "jotai": "2.9.0",
         "js-file-download": "0.4.12",
-        "js-md5": "0.7.3",
         "jsep": "1.3.8",
-        "jsonpath-plus": "7.2.0",
         "jszip": "3.10.1",
         "leaflet": "1.9.4",
         "lexical": "0.12.2",
         "localforage": "1.10.0",
         "lodash-es": "4.17.21",
-        "lru-cache": "8.0.4",
         "mini-svg-data-uri": "1.4.4",
         "moment-timezone": "0.5.43",
         "parse-domain": "7.0.1",
-        "proj4": "2.11.0",
-        "protomaps": "^1.23.1",
         "quickjs-emscripten": "0.23.0",
         "quickjs-emscripten-sync": "1.5.2",
         "rc-slider": "9.7.5",
-        "react": "18.2.0",
+        "react": "18.3.1",
         "react-accessible-accordion": "5.0.0",
         "react-align": "2.2.2",
         "react-beautiful-dnd": "13.1.1",
         "react-colorful": "5.6.1",
         "react-dnd": "16.0.1",
         "react-dnd-html5-backend": "16.0.1",
-        "react-dom": "18.2.0",
+        "react-dom": "18.3.1",
         "react-dropzone": "14.2.3",
-        "react-error-boundary": "4.0.11",
         "react-ga": "3.3.1",
         "react-ga4": "2.1.0",
         "react-i18next": "12.2.2",
-        "react-inlinesvg": "3.0.2",
         "react-leaflet": "4.2.1",
         "react-markdown": "8.0.7",
-        "react-nl2br": "1.0.4",
         "react-player": "2.13.0",
         "react-popper": "2.3.0",
         "react-router-dom": "6.21.0",
@@ -192,16 +176,11 @@
         "react-use": "17.4.0",
         "react18-json-view": "0.2.7",
         "remark-gfm": "3.0.1",
-        "resium": "1.17.3",
         "sortablejs": "1.15.2",
-        "suspend-react": "^0.1.3",
         "tinycolor2": "1.6.0",
         "ts-easing": "0.2.0",
-        "use-callback-ref": "1.3.0",
-        "use-custom-compare": "1.4.0",
         "use-file-input": "1.0.0",
-        "uuid": "9.0.1",
-        "xstate": "4.38.2"
+        "uuid": "9.0.1"
     },
     "packageManager": "[email protected]"
 }

web/src/beta/components/Icon/index.tsx

@@ -1,5 +1,4 @@
 import { AriaAttributes, AriaRole, CSSProperties, MouseEvent, memo, useMemo } from "react";
-// import SVG from "react-inlinesvg";
 
 import { ariaProps } from "@reearth/beta/utils/aria";
 import { styled } from "@reearth/services/theme";

web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/Timeline/UI/ScaleList.test.tsx

@@ -26,7 +26,6 @@ test("it should render memory and date label", () => {
     />,
   );
 
-  // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
   const children = Array.from(container.querySelector("div")?.children || []);
   expect(children.length).toBe(scaleCount + 1);
 
@@ -68,7 +67,6 @@ test("it should render memory and date label when scaleInterval is changed", ()
     />,
   );
 
-  // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
   const children = Array.from(container.querySelector("div")?.children || []);
   expect(children.length).toBe(scaleCount + 1);
 
@@ -107,7 +105,6 @@ test("it should render memory and date label when strongScaleMinutes is changed"
     />,
   );
 
-  // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
   const children = Array.from(container.querySelector("div")?.children || []);
   expect(children.length).toBe(scaleCount + 1);
 

web/src/services/api/types.ts

@@ -1,5 +1,5 @@
 import { OperationVariables } from "@apollo/client";
-import { GraphQLError } from "graphql/index";
+import { GraphQLFormattedError } from "graphql/index";
 
 export type QueryReturn<T> = {
   data?: T | null | undefined;
@@ -8,5 +8,5 @@ export type QueryReturn<T> = {
 export type MutationReturn<T> = {
   data?: T | null | undefined;
   status: "success" | "error";
-  errors?: ReadonlyArray<GraphQLError>;
+  errors?: ReadonlyArray<GraphQLFormattedError>;
 };

web/src/services/gql/provider/links/uploadLink.ts

@@ -1,4 +1,4 @@
-import { createUploadLink } from "apollo-upload-client";
+import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
 
 export default (endpoint: string) => {
   return createUploadLink({

web/tsconfig.json

@@ -33,7 +33,7 @@
       {
         "name": "typescript-styled-plugin"
       }
-    ]
+    ],
   },
   "exclude":[
     "src/beta/lib/unsafeBuiltinPlugins"