objective: let people render a widget on their site using a script tag (that we provide)

the script that gets webpack compiled looks like this

import { createRoot } from "react-dom/client";

...

    const widgetContainer = document.createElement("div");
    document.body.appendChild(widgetContainer);
    const root = createRoot(widgetContainer);

    root.render(
      (
        <MyComponent />
      ) as any
    );

The component compiles fine on server, but errors in the browser related to the AppRouter context

Error is being thrown in navigation.js

function useRouter() {
    (0, _clienthookinservercomponenterror.clientHookInServerComponentError)("useRouter");
    const router = (0, _react.useContext)(_approutercontextsharedruntime.AppRouterContext);
    if (router === null) {
        throw new Error("invariant expected app router to be mounted");
    }
    return router;
}

What's ideal setup here?