Error trying to load the supertokensui signup/in component in Vue (using Docs)

[rezelute]

🐛 Bug Report

I followed to docs here while setting up a very basic Vue 3 application: https://supertokens.com/docs/quickstart/frontend-setup, but i just get the following console error which is coming from: init genericComponentOverrideContext.js:1339 Uncaught TypeError: n is undefined

<template>
   <div id="supertokensui" />
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from "vue";
export default defineComponent({
   setup() {
      const loadScript = (src: string) => {
         const script = document.createElement("script");
         script.type = "text/javascript";
         script.src = src;
         script.id = "supertokens-script";
         script.onload = () => {
            supertokensUIInit({
               appInfo: {
                  appName: "Auth App",
                  apiDomain: "my-api-domain",
                  websiteDomain: "my-app-domain",
                  apiBasePath: "/auth",
                  websiteBasePath: "/auth",
               },
               recipeList: [supertokensUIEmailPassword.init(), supertokensUISession.init()],
            });
         };
         document.body.appendChild(script);
      };

      onMounted(() => {
         loadScript("https://cdn.jsdelivr.net/gh/supertokens/prebuiltui@v0.48.0/build/static/js/main.81589a39.js");
      });

      onUnmounted(() => {
         const script = document.getElementById("supertokens-script");
         if (script) {
            script.remove();
         }
      });
   },
});
</script>

I then tried to follow the docs for the Custom UI and there is a piece of code missing here:
"After that, call the following function when the user submits the form that you have previously created."

[imxuedi]

I'm having the same issue, the root cause is that the documentation is wrong, the method signature of supertokensUIInit has two arguments, and only one is used here, resulting in the wrong pass of the arguments.

Source Code:

function supertokensUIInit(divId: string, customConfig: any) {
    SuperTokens.init(customConfig);

    let element = document.getElementById(divId);
    if (element !== null) {
        const root = ReactDOM.createRoot(element as HTMLElement);
        root.render(
            <React.StrictMode>
                <App />
            </React.StrictMode>
        );
    }
}

Solving this problem is as simple as updating the mount point parameter of the element (divId)

<template>
    <div id="supertokensui" />
</template>

script.onload = () => {
script.onload = () => {
    (window as any).supertokensUIInit(
        "supertokensui",
        {
            appInfo: {
                appName: "App Name",
                apiDomain: "http://localhost:3000",
                websiteDomain: "http://localhost:5173",
                apiBasePath: "/auth",
                websiteBasePath: "/auth"
            },
            recipeList: [
                (window as any).supertokensUIEmailPassword.init(),
                (window as any).supertokensUISession.init(),
            ],
        });
};

[porcellus]

@bcbogdan Could you please check on this?