I am trying to load the a property (gradio-app) from a third party script. However, the gradio-app is not rendered in the page.

https://www.gradio.app/guides/sharing-your-app#embedding-hosted-spaces

import Script from 'next/script'

export default async function Gradio() {
    return (
        <>
            <Script
                type="module"
                src="https://gradio.s3-us-west-2.amazonaws.com/4.36.1/gradio.js" strategy="beforeInteractive" />
            <gradio-app src="https://multimodalart-hallo.hf.space"></gradio-app>
        </>
    )
}

There is no error in the console when I load this page.

I did a test. I wrote a pure html file without using nextJS. The app is loaded properly.

I am clueless of what is going wrong.

Any help is appreciated.

To reproduce this problem:

1. You can create an empty NextJS project by runing: npx create-next-app@latest
2. Delete the content in the /app/page.tsx file.
3. paste the following code into the file:

import Script from 'next/script'

export default function Home() {
    return (
        <>
        <Script type= "module" src = "https://gradio.s3-us-west-2.amazonaws.com/4.36.1/gradio.js" strategy = "beforeInteractive" />
        <gradio-app src = "https://multimodalart-hallo.hf.space" > </gradio-app>
        < />
    )
}

4. start the server by npm run dev
5. Launch the homepage. You should see that the gradio app is not loaded. This is a problem.