diff --git a/dep-graph/client-e2e/src/integration/app.spec.ts b/dep-graph/client-e2e/src/integration/app.spec.ts
index 0f81b1fb11..ce7eae370f 100644
--- a/dep-graph/client-e2e/src/integration/app.spec.ts
+++ b/dep-graph/client-e2e/src/integration/app.spec.ts
@@ -192,7 +192,7 @@ describe('dep-graph-client', () => {
     });
   });
 
-  describe.only('setting url params', () => {
+  describe('setting url params', () => {
     it('should set focused project', () => {
       cy.contains('nx-dev').scrollIntoView().should('be.visible');
       cy.get('[data-project="nx-dev"]').prev('button').click({ force: true });
diff --git a/dep-graph/client/project.json b/dep-graph/client/project.json
index 10fd5cea66..f79717669c 100644
--- a/dep-graph/client/project.json
+++ b/dep-graph/client/project.json
@@ -28,7 +28,8 @@
             "maximumWarning": "2mb",
             "maximumError": "5mb"
           }
-        ]
+        ],
+        "webpackConfig": "dep-graph/client/webpack.config.js"
       },
       "configurations": {
         "dev": {
diff --git a/dep-graph/client/src/app/sidebar/project-list.tsx b/dep-graph/client/src/app/sidebar/project-list.tsx
index 803074ec93..6a8f604148 100644
--- a/dep-graph/client/src/app/sidebar/project-list.tsx
+++ b/dep-graph/client/src/app/sidebar/project-list.tsx
@@ -88,7 +88,7 @@ function ProjectListItem({
         <label
           className="font-mono font-normal ml-3 p-2 transition hover:bg-gray-50 cursor-pointer block rounded-md truncate w-full"
           data-project={project.projectGraphNode.name}
-          data-active={project.isSelected}
+          data-active={project.isSelected.toString()}
           onClick={() =>
             toggleProject(project.projectGraphNode.name, project.isSelected)
           }
diff --git a/dep-graph/client/webpack.config.js b/dep-graph/client/webpack.config.js
new file mode 100644
index 0000000000..31b9ad59cd
--- /dev/null
+++ b/dep-graph/client/webpack.config.js
@@ -0,0 +1,15 @@
+module.exports = (config, context) => {
+  return {
+    ...config,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        react: 'preact/compat',
+        'react-dom/test-utils': 'preact/test-utils',
+        'react-dom': 'preact/compat', // Must be below test-utils
+        'react/jsx-runtime': 'preact/jsx-runtime',
+      },
+    },
+  };
+};
diff --git a/package.json b/package.json
index 1d8deac110..121fb626d9 100644
--- a/package.json
+++ b/package.json
@@ -280,6 +280,7 @@
     "gray-matter": "^4.0.2",
     "next-seo": "^4.28.1",
     "npm-run-path": "^4.0.1",
+    "preact": "10.6.4",
     "react": "17.0.2",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "17.0.2",
diff --git a/yarn.lock b/yarn.lock
index b481bb740b..9b4a5ab616 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18826,6 +18826,11 @@ postcss@^8.1.10, postcss@^8.2.15, postcss@^8.2.4, postcss@^8.2.9, postcss@^8.3.5
     picocolors "^1.0.0"
     source-map-js "^0.6.2"
 
+preact@10.6.4:
+  version "10.6.4"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.6.4.tgz#ad12c409ff1b4316158486e0a7b8d43636f7ced8"
+  integrity sha512-WyosM7pxGcndU8hY0OQlLd54tOU+qmG45QXj2dAYrL11HoyU/EzOSTlpJsirbBr1QW7lICxSsVJJmcmUglovHQ==
+
 precise-commits@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/precise-commits/-/precise-commits-1.0.2.tgz#4659be01a9c3310f50ce51ddf913fead1d7cc940"