diff --git a/package-lock.json b/package-lock.json
index cd4ed21..6cef9a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "remix-development-tools",
- "version": "2.1.3",
+ "version": "2.1.4",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "remix-development-tools",
- "version": "2.1.3",
+ "version": "2.1.4",
"license": "MIT",
"workspaces": [
".",
diff --git a/package.json b/package.json
index 9555915..bb849ee 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "remix-development-tools",
"description": "Remix development tools.",
"author": "Alem Tuzlak",
- "version": "2.1.3",
+ "version": "2.1.4",
"license": "MIT",
"keywords": [
"remix",
diff --git a/src/RemixDevTools/hooks/useOutletAugment.tsx b/src/RemixDevTools/hooks/useOutletAugment.tsx
index 52e2399..1c94bca 100644
--- a/src/RemixDevTools/hooks/useOutletAugment.tsx
+++ b/src/RemixDevTools/hooks/useOutletAugment.tsx
@@ -1,24 +1,30 @@
import { useEffect } from "react";
import { InvisibleBoundary } from "../init/project";
-const isHooked = Symbol("isHooked");
+const isHooked = Symbol("isHooked") as any;
+
export function useOutletAugment() {
useEffect(() => {
- if (window.__remixRouteModules[isHooked as any]) return;
+ if (window.__remixRouteModules[isHooked]) return;
window.__remixRouteModules = new Proxy(window.__remixRouteModules, {
get: function (target, property) {
- if (property === isHooked) return target[property as any];
+ const key = property as any;
+ if (property === isHooked) return target[key];
if (property === "root") return target[property];
- const value = target[property as any];
+ const value = target[key];
if (value?.default && value.default.name !== "hooked") {
return {
...value,
default: function hooked() {
+ // Does not pollute the DOM with invisible boundaries after the first render
+ if (document.getElementsByClassName(key).length) {
+ return ;
+ }
return (
<>
-
+
>
);