Trying to use remix developement tools in blue stack

[satelin2002]

`import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
import rdtStylesheet from "remix-development-tools/index.css";

import { getUser } from "/session.server";
import stylesheet from "/tailwind.css";

export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
...(process.env.NODE_ENV === "development"
? [{ rel: "stylesheet", href: rdtStylesheet }]
: []),
];

export const loader = async ({ request }: LoaderFunctionArgs) => {
return json({ user: await getUser(request) });
};

function App() {
return (














);
}

let AppExport = App;
if (process.env.NODE_ENV === "development") {
const {
withDevTools,
} = async () => {
await import("remix-development-tools");
};
AppExport = withDevTools(AppExport);
}

export default AppExport;
`

getting the following error

/Users/stelang/projects/remix/remix-app/app/root.tsx:55
AppExport = withDevTools(AppExport);
^
TypeError: withDevTools is not a function
at Object. (/Users/stelang/projects/remix/remix-app/app/root.tsx:55:15)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Function.Module._load (node:internal/modules/cjs/loader:960:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

[AlemTuzlak]

@satelin2002 this seems to be an issue with

const {
withDevTools,
} = async () => {
await import("remix-development-tools");
};

it should be

const {
withDevTools,
} =   await import("remix-development-tools");