v1.0.9

Author: AlemTuzlak

package.json

@@ -2,7 +2,7 @@
   "name": "remix-development-tools",
   "description": "Remix development tools.",
   "author": "Alem Tuzlak",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "license": "MIT",
   "keywords": [
     "remix",

src/RemixDevTools/index.ts

@@ -1,2 +1 @@
 export * from "./RemixDevTools";
-export { RemixDevTools as default } from "./RemixDevTools";

src/index.ts

@@ -1,3 +1,5 @@
 import "./input.css";
-export * from "./RemixDevTools";
+import { RemixDevTools } from "./RemixDevTools";
+export { RemixDevTools };
 //export * from "./monitor";
+export default RemixDevTools;

src/remix-app-for-testing/app/root.tsx

@@ -9,11 +9,16 @@ import {
   ScrollRestoration,
   useMatches,
 } from "@remix-run/react";
-import stylesheet from "remix-development-tools/stylesheet.css";
-import { RemixDevTools } from "remix-development-tools";
+import { lazy } from "react";
+import rdtStylesheet from "remix-development-tools/stylesheet.css";
+
+const RemixDevTools =
+  process.env.NODE_ENV === "development"
+    ? lazy(() => import("remix-development-tools"))
+    : undefined;
 
 export const links: LinksFunction = () => [
-  ...(stylesheet ? [{ rel: "stylesheet", href: stylesheet }] : []),
+  ...(rdtStylesheet && process.env.NODE_ENV === "development" ? [{ rel: "stylesheet", href: rdtStylesheet }] : []),
 ];
 
 export const loader = () => {
@@ -44,7 +49,7 @@ export default function App() {
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
-        <RemixDevTools defaultOpen />
+        {RemixDevTools && <RemixDevTools defaultOpen />}
       </body>
     </html>
   );

src/remix-app-for-testing/tsconfig.json

@@ -15,7 +15,7 @@
     "paths": {
       "~/*": ["./app/*"]
     },
-
+    "module": "ESNext",
     // Remix takes care of building everything in `remix build`.
     "noEmit": true
   }

vite.config.ts

@@ -47,6 +47,7 @@ export default defineConfig({
     rollupOptions: {
       external: ["react", "react-dom", "@remix-run/react"],
       output: {
+        exports: "named",
         globals: {
           react: "React",
           ["react-dom"]: "ReactDOM",