housekeeping: Updating react-router & react-router-dom to 6.0.0

frontend/api/package.json

@@ -7,6 +7,7 @@
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "scripts": {
+    "clean": "yarn run package:clean",
     "publishBeta": "../../tools/publish-frontend.sh api"
   },
   "dependencies": {

frontend/package.json

@@ -85,8 +85,8 @@
     "jest": "27.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-router": "6.0.0-beta.0",
-    "react-router-dom": "6.0.0-beta.0",
+    "react-router": "6.0.0",
+    "react-router-dom": "6.0.0",
     "recharts": "2.1.9",
     "typescript": "4.2.3"
   },

frontend/packages/app/config-overrides.js

@@ -1,17 +1,27 @@
 module.exports = function override(config) {
   const loaders = config.module.rules.find(rule => rule.oneOf).oneOf;
-  loaders.splice(2, 0, {
-    test: /\.(js|mjs|jsx|ts|tsx)$/,
-    exclude: /.*node_modules.*/,
-    use: [
-      {
-        loader: "esbuild-loader",
-        options: {
-          loader: "jsx",
-          target: "esnext",
+  loaders.splice(
+    2,
+    0,
+    {
+      test: /\.(js|mjs|jsx|ts|tsx)$/,
+      exclude: /.*node_modules.*/,
+      use: [
+        {
+          loader: "esbuild-loader",
+          options: {
+            loader: "jsx",
+            target: "esnext",
+          },
         },
-      },
-    ],
-  });
-  return config;
+      ],
+    },
+    {
+      test: /\.js$/,
+      enforce: "pre",
+      use: ["source-map-loader"],
+    }
+  );
+
+  return { ...config, ignoreWarnings: [/Failed to parse source map/] };
 };

frontend/packages/core/package.json

@@ -53,8 +53,7 @@
     "material-table": "^2.0.3",
     "react-hook-form": "^7.25.3",
     "react-is": "^17.0.2",
-    "react-router": "^6.0.0-beta.0",
-    "react-router-dom": "^6.0.0-beta.0",
+    "react-router-dom": "6.0.0",
     "react-test-renderer": "^17.0.2",
     "react-timeago": "^7.0.0",
     "recharts": "^2.1.9",

frontend/packages/core/src/AppLayout/stories/drawer.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { MemoryRouter } from "react-router";
+import { MemoryRouter } from "react-router-dom";
 import { Grid } from "@mui/material";
 import type { Meta } from "@storybook/react";
 

frontend/packages/core/src/AppLayout/stories/header.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { MemoryRouter } from "react-router";
+import { MemoryRouter } from "react-router-dom";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ApplicationContext, UserPreferencesProvider } from "../../Contexts";

frontend/packages/core/src/AppLayout/stories/searchfield.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { MemoryRouter } from "react-router";
+import { MemoryRouter } from "react-router-dom";
 import styled from "@emotion/styled";
 import { Box, Grid as MuiGrid, Theme } from "@mui/material";
 import type { Meta } from "@storybook/react";

frontend/packages/core/src/NPS/stories/banner.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { MemoryRouter } from "react-router";
+import { MemoryRouter } from "react-router-dom";
 import type { Meta } from "@storybook/react";
 
 import { Header } from "../../AppLayout/header";

frontend/packages/core/src/NPS/stories/header.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { MemoryRouter } from "react-router";
+import { MemoryRouter } from "react-router-dom";
 import type { Meta } from "@storybook/react";
 
 import { Header } from "../../AppLayout/header";

frontend/packages/core/src/WorkflowLayout/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { matchPath } from "react-router";
+import { matchPath } from "react-router-dom";
 import type { Interpolation } from "@emotion/styled";
 import type { CSSObject, Theme } from "@mui/material";
 

frontend/packages/core/src/utils/generateBreadcrumbsEntries.tsx

@@ -1,4 +1,4 @@
-import type { Location } from "history";
+import type { Location } from "react-router-dom";
 
 import type { BreadcrumbEntry } from "../Breadcrumbs";
 

frontend/packages/core/src/utils/pathMatching.tsx

@@ -1,4 +1,4 @@
-import { matchPath } from "react-router";
+import { matchPath } from "react-router-dom";
 
 const findPathMatchList = (locationPathname: string, pathsToMatch: string[]) => {
   const pathFound = pathsToMatch?.find((path: string) => matchPath({ path }, locationPathname));

frontend/packages/tools/yarn.config.cjs

@@ -13,8 +13,8 @@ const enforcedPackages = {
   "@types/react-dom": "^17.0.3",
   "@types/react": "^17.0.5",
   "react-dom": "^17.0.2",
-  "react-router-dom": "^6.0.0-beta.0",
-  "react-router": "^6.0.0-beta.0",
+  "react-router-dom": "6.0.0",
+  "react-router": "6.0.0",
   esbuild: "^0.18.0",
   eslint: "^8.3.0",
   jest: "^27.0.0",

frontend/workflows/projectCatalog/package.json

@@ -41,7 +41,6 @@
     "@mui/material": "^5.11.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "6.0.0-beta.0",
     "typescript": "^4.2.3"
   },
   "engines": {

frontend/workflows/projectCatalog/src/details/components/layout.tsx

@@ -32,7 +32,7 @@ const CatalogLayout = ({
   allowDisabled,
   quickLinkSettings = true,
 }: CatalogLayoutProps) => {
-  const { projectId } = useParams();
+  const { projectId = "" } = useParams();
   const navigate = useNavigate();
   const [projectInfo, setProjectInfo] = React.useState<IClutch.core.project.v1.IProject | null>(
     null
@@ -56,12 +56,16 @@ const CatalogLayout = ({
       });
 
   React.useEffect(() => {
-    fetchData();
+    if (projectId) {
+      fetchData();
 
-    const interval = setInterval(fetchData, 30000);
+      const interval = setInterval(fetchData, 30000);
 
-    return () => (interval ? clearInterval(interval) : undefined);
-  }, []);
+      return () => (interval ? clearInterval(interval) : undefined);
+    }
+
+    return () => {};
+  }, [projectId]);
 
   return (
     <ProjectDetailsContext.Provider value={projInfo}>

frontend/workflows/projectCatalog/src/details/components/link-settings.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useParams } from "react-router-dom";
 import {
   checkFeatureEnabled,
   Grid,
@@ -11,6 +10,7 @@ import {
   QuickLinksCard,
   styled,
   Typography,
+  useParams,
 } from "@clutch-sh/core";
 import SettingsIcon from "@mui/icons-material/Settings";
 import { isEmpty } from "lodash";

tools/scaffolding/templates/frontend/workflow/external/package.json

@@ -43,8 +43,8 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hook-form": "7.25.3",
-    "react-router": "6.0.0-beta.0",
-    "react-router-dom": "6.0.0-beta.0",
+    "react-router": "6.0.0",
+    "react-router-dom": "6.0.0",
     "typescript": "4.2.3"
   },
   "devDependencies": {