Bump esbuild, vitest, @vitejs/plugin-react-swc, @vitest/coverage-v8 and vite (#2854)

dependabot[bot] · CollinBeczak · web-flow · commit 7a4fe06a7cdc · 2026-06-29T16:20:06.000-05:00
* Bump esbuild, vitest, @vitejs/plugin-react-swc, @vitest/coverage-v8 and vite Removes [esbuild](https://github.com/evanw/esbuild). It's no longer used after updating ancestor dependencies [esbuild](https://github.com/evanw/esbuild), [vitest](https://github.com/vitest-dev/vitest/tree/HEAD/packages/vitest), [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/tree/HEAD/packages/plugin-react-swc), [@vitest/coverage-v8](https://github.com/vitest-dev/vitest/tree/HEAD/packages/coverage-v8) and [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite). These dependencies need to be updated together. Removes `esbuild` Updates `vitest` from 3.1.4 to 4.1.8 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md) - [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.8/packages/vitest) Updates `@vitejs/plugin-react-swc` from 3.8.0 to 4.3.1 - [Release notes](https://github.com/vitejs/vite-plugin-react/releases) - [Changelog](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite-plugin-react/commits/v4.3.1/packages/plugin-react-swc) Updates `@vitest/coverage-v8` from 3.1.4 to 4.1.8 - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Changelog](https://github.com/vitest-dev/vitest/blob/main/docs/releases.md) - [Commits](https://github.com/vitest-dev/vitest/commits/v4.1.8/packages/coverage-v8) Updates `vite` from 6.4.2 to 8.0.16 - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v8.0.16/packages/vite) --- updated-dependencies: - dependency-name: esbuild dependency-version: dependency-type: indirect - dependency-name: vitest dependency-version: 4.1.8 dependency-type: direct:development - dependency-name: "@vitejs/plugin-react-swc" dependency-version: 4.3.1 dependency-type: direct:development - dependency-name: "@vitest/coverage-v8" dependency-version: 4.1.8 dependency-type: direct:development - dependency-name: vite dependency-version: 8.0.16 dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> * Add BingLayer component for enhanced map functionality - Introduced a new BingLayer component to integrate Bing Maps with Leaflet. - Updated SourcedTileLayer to import the new BingLayer instead of the previous package. - This change improves compatibility with the current build system and resolves import issues with react-leaflet-bing-v2. * run formatting * fix mocks to use constructable functions * Refactor MediaQuery imports to use react-responsive * Update OAuth URL in .env and refactor MediaQuery usage across components - Changed the REACT_APP_SERVER_OAUTH_URL in the .env file to use the full URL. - Replaced instances of react-responsive with a custom MediaQuery component in AdminPane, Navbar, ReviewTaskPane, TaskPane, and Review components for improved compatibility. --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Collin Beczak <ctbeczak08@gmail.com>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -129,8 +129,8 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/node": "^22.10.5",
-    "@vitejs/plugin-react-swc": "^3.7.1",
-    "@vitest/coverage-v8": "^3.1.4",
+    "@vitejs/plugin-react-swc": "^4.3.1",
+    "@vitest/coverage-v8": "^4.1.8",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "dotenv": "^16.4.5",
     "dotenv-cli": "^7.4.2",
@@ -159,8 +159,8 @@
     "tailwindcss-transforms": "^2.2.0",
     "tailwindcss-transition": "^1.0.5",
     "tailwindcss-visuallyhidden": "^1.0.2",
-    "vite": "^6.4.2",
-    "vitest": "^3.1.4"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "resolutions": {
     "react-error-overlay": "6.0.9"
diff --git a/src/components/AdminPane/AdminPane.jsx b/src/components/AdminPane/AdminPane.jsx
@@ -1,13 +1,13 @@
 import PropTypes from "prop-types";
 import { Component, Fragment } from "react";
-import MediaQuery from "react-responsive";
 import { Route, Switch, withRouter } from "react-router-dom";
 import AsManager from "../../interactions/User/AsManager";
 import SignIn from "../../pages/SignIn/SignIn";
 import BusySpinner from "../BusySpinner/BusySpinner";
 import WithCurrentUser from "../HOCs/WithCurrentUser/WithCurrentUser";
 import WithStatus from "../HOCs/WithStatus/WithStatus";
 import HeadTitle from "../Head/Head";
+import MediaQuery from "../MediaQuery/MediaQuery";
 import ScreenTooNarrow from "../ScreenTooNarrow/ScreenTooNarrow";
 import ChallengeDashboard from "./Manage/ChallengeDashboard/ChallengeDashboard";
 import EditProject from "./Manage/EditProject/EditProject";
diff --git a/src/components/EnhancedMap/SourcedTileLayer/BingLayer.js b/src/components/EnhancedMap/SourcedTileLayer/BingLayer.js
@@ -0,0 +1,15 @@
+import { createLayerComponent } from "@react-leaflet/core";
+import L from "leaflet";
+
+// Side-effect import: registers L.BingLayer / L.bingLayer on the Leaflet global.
+// We intentionally bypass react-leaflet-bing-v2's own Bing.js wrapper, which does
+// `import {bingLayer} from './leaflet.bing'` — a binding that file never exports.
+// Older bundlers ignored the dead import; Vite/rolldown rejects it as MISSING_EXPORT.
+import "react-leaflet-bing-v2/src/leaflet.bing.js";
+
+const createLeafletElement = (props) => {
+  const instance = L.bingLayer(props.bingkey, props);
+  return { instance };
+};
+
+export const BingLayer = createLayerComponent(createLeafletElement);
diff --git a/src/components/EnhancedMap/SourcedTileLayer/SourcedTileLayer.jsx b/src/components/EnhancedMap/SourcedTileLayer/SourcedTileLayer.jsx
@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import { FormattedMessage, injectIntl } from "react-intl";
 import { TileLayer } from "react-leaflet";
-import { BingLayer } from "react-leaflet-bing-v2/src/index.js";
 import AppErrors from "../../../services/Error/AppErrors";
 import {
   defaultLayerSource,
@@ -12,6 +11,7 @@ import {
 } from "../../../services/VisibleLayer/LayerSources";
 import WithErrors from "../../HOCs/WithErrors/WithErrors";
 import TileLayerErrorBoundary from "../../TaskClusterMap/TileLayerErrorBoundary";
+import { BingLayer } from "./BingLayer";
 
 /**
  * SourcedTileLayer renders a react-leaflet TileLayer from the current
diff --git a/src/components/MapillaryViewer/MapillaryViewer.test.jsx b/src/components/MapillaryViewer/MapillaryViewer.test.jsx
@@ -4,10 +4,15 @@ import MapillaryViewer from "./MapillaryViewer";
 
 vitest.mock("mapillary-js", () => {
   return {
-    Viewer: vitest.fn().mockImplementation(() => ({
-      setImageId: vitest.fn(),
-      remove: vitest.fn(),
-    })),
+    // Use a regular (constructable) function rather than an arrow function:
+    // the component invokes `new Viewer(...)`, and vitest constructs the mock
+    // via its implementation, which arrow functions cannot satisfy.
+    Viewer: vitest.fn(function () {
+      return {
+        setImageId: vitest.fn(),
+        remove: vitest.fn(),
+      };
+    }),
   };
 });
 
diff --git a/src/components/MediaQuery/MediaQuery.js b/src/components/MediaQuery/MediaQuery.js
@@ -0,0 +1,10 @@
+import reactResponsive from "react-responsive";
+
+// react-responsive ships a UMD bundle whose MediaQuery component lives on the
+// module's `default` export. Vite's browser dependency optimizer hands back the
+// whole module namespace for a default import (component on `.default`), while
+// vitest unwraps to the component itself. Normalize to the component here so a
+// single `import MediaQuery from ".../MediaQuery"` renders in both environments.
+const MediaQuery = reactResponsive.default ?? reactResponsive;
+
+export default MediaQuery;
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -2,14 +2,14 @@ import classNames from "classnames";
 import { Component, Fragment } from "react";
 import MobileMenu from "react-burger-menu/lib/menus/slide";
 import { FormattedMessage, injectIntl } from "react-intl";
-import MediaQuery from "react-responsive";
 import { Link, NavLink } from "react-router-dom";
 import resolveConfig from "tailwindcss/resolveConfig";
 import AsAvatarUser from "../../interactions/User/AsAvatarUser";
 import AsManager from "../../interactions/User/AsManager";
 import tailwindConfig from "../../tailwind.config.js";
 import AchievementBadge from "../AchievementBadge/AchievementBadge";
 import Dropdown from "../Dropdown/Dropdown";
+import MediaQuery from "../MediaQuery/MediaQuery";
 import PointsTicker from "../PointsTicker/PointsTicker";
 import SignInButton from "../SignInButton/SignInButton";
 import SvgSymbol from "../SvgSymbol/SvgSymbol";
diff --git a/src/components/ReviewTaskPane/ReviewTaskPane.jsx b/src/components/ReviewTaskPane/ReviewTaskPane.jsx
@@ -1,7 +1,6 @@
 import PropTypes from "prop-types";
 import { Component } from "react";
 import { FormattedMessage } from "react-intl";
-import MediaQuery from "react-responsive";
 import { WidgetDataTarget, generateWidgetId, widgetDescriptor } from "../../services/Widget/Widget";
 import BusySpinner from "../BusySpinner/BusySpinner";
 import ChallengeNameLink from "../ChallengeNameLink/ChallengeNameLink";
@@ -13,6 +12,7 @@ import WithCurrentUser from "../HOCs/WithCurrentUser/WithCurrentUser";
 import WithTaskBundle from "../HOCs/WithTaskBundle/WithTaskBundle";
 import WithTaskReview from "../HOCs/WithTaskReview/WithTaskReview";
 import WithWidgetWorkspaces from "../HOCs/WithWidgetWorkspaces/WithWidgetWorkspaces";
+import MediaQuery from "../MediaQuery/MediaQuery";
 import SvgSymbol from "../SvgSymbol/SvgSymbol";
 import MobileTaskDetails from "../TaskPane/MobileTaskDetails/MobileTaskDetails";
 import TaskMap from "../TaskPane/TaskMap/TaskMap";
diff --git a/src/components/TaskPane/TaskPane.jsx b/src/components/TaskPane/TaskPane.jsx
@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import { Component, Fragment } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { FormattedMessage, injectIntl } from "react-intl";
-import MediaQuery from "react-responsive";
 import { Redirect } from "react-router";
 import { Link } from "react-router-dom";
 import AsManager from "../../interactions/User/AsManager";
@@ -26,6 +25,7 @@ import WithKeyboardShortcuts from "../HOCs/WithKeyboardShortcuts/WithKeyboardSho
 import WithLockedTask from "../HOCs/WithLockedTask/WithLockedTask";
 import WithTaskBundle from "../HOCs/WithTaskBundle/WithTaskBundle";
 import WithWidgetWorkspaces from "../HOCs/WithWidgetWorkspaces/WithWidgetWorkspaces";
+import MediaQuery from "../MediaQuery/MediaQuery";
 import SvgSymbol from "../SvgSymbol/SvgSymbol";
 import WidgetWorkspace from "../WidgetWorkspace/WidgetWorkspace";
 import TaskMapWidget from "../Widgets/TaskMapWidget/TaskMapWidget";
diff --git a/src/pages/Review/Review.jsx b/src/pages/Review/Review.jsx
@@ -10,13 +10,13 @@ import PropTypes from "prop-types";
 import { Component } from "react";
 import { FormattedMessage } from "react-intl";
 import { injectIntl } from "react-intl";
-import MediaQuery from "react-responsive";
 import { Link } from "react-router-dom";
 import WithCurrentUser from "../../components/HOCs/WithCurrentUser/WithCurrentUser";
 import WithReviewTasks from "../../components/HOCs/WithReviewTasks/WithReviewTasks";
 import WithWebSocketSubscriptions from "../../components/HOCs/WithWebSocketSubscriptions/WithWebSocketSubscriptions";
 import WithWidgetWorkspaces from "../../components/HOCs/WithWidgetWorkspaces/WithWidgetWorkspaces";
 import Header from "../../components/Header/Header";
+import MediaQuery from "../../components/MediaQuery/MediaQuery";
 import ScreenTooNarrow from "../../components/ScreenTooNarrow/ScreenTooNarrow";
 import SignInButton from "../../components/SignInButton/SignInButton";
 import WidgetWorkspace from "../../components/WidgetWorkspace/WidgetWorkspace";
diff --git a/src/services/Server/WebSocketClient.test.js b/src/services/Server/WebSocketClient.test.js
@@ -20,8 +20,11 @@ describe("WebSocketClient", () => {
     // Clear any previous mocks
     vi.clearAllMocks();
 
-    // Mock the global WebSocket
-    global.WebSocket = vi.fn(() => {
+    // Mock the global WebSocket. Use a regular (constructable) function rather
+    // than an arrow function: the client invokes `new WebSocket(...)`, which
+    // vitest satisfies by constructing the mock's implementation — and arrow
+    // functions cannot be constructed.
+    global.WebSocket = vi.fn(function () {
       // Set up the mock WebSocket and return it
       setTimeout(() => {
         if (mockWebSocket.onopen) {
@@ -47,7 +50,9 @@ describe("WebSocketClient", () => {
   describe("connection management", () => {
     it("establishes connection on instantiation", () => {
       // Mock the WebSocket constructor before creating the client
-      const wsConstructorSpy = vi.fn(() => mockWebSocket);
+      const wsConstructorSpy = vi.fn(function () {
+        return mockWebSocket;
+      });
       global.WebSocket = wsConstructorSpy;
 
       client = new WebSocketClient();
@@ -78,10 +83,15 @@ describe("WebSocketClient", () => {
         onclose: null,
       };
 
-      const wsConstructorSpy = vi
-        .fn()
-        .mockReturnValueOnce(firstMockWebSocket)
-        .mockReturnValueOnce(secondMockWebSocket);
+      // Regular (constructable) function returning a different socket per call:
+      // the client constructs the WebSocket via `new`, which arrow functions and
+      // bare mockReturnValue mocks cannot satisfy. The call counter lives outside
+      // the spy so it survives the mockClear() below.
+      let constructCount = 0;
+      const sockets = [firstMockWebSocket, secondMockWebSocket];
+      const wsConstructorSpy = vi.fn(function () {
+        return sockets[constructCount++] ?? secondMockWebSocket;
+      });
 
       global.WebSocket = wsConstructorSpy;
 
