Unable to run custom component dev server based on DataFrame template

[shimizust]

Describe the bug

I'm trying to create a custom component that extends the existing DataFrame component. While I am able to spin up dev servers for custom components based on SimpleTextbox and Button, for example, it just hangs when I try using DataFrame as template. I haven't made any modifications to the code at this point.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

gradio cc create DataFrameV2 --template DataFrame

This succeeds, but when I go to start up the dev server it just hangs at the loading screen. I see the following errors in the browser dev console (see screenshot):

gradio cc dev

I also tried explicitly specifying my gradio-path and python-path, but encounter the same issue.

Screenshot

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 4.31.3
gradio_client version: 0.16.3

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.0.1
fastapi: 0.109.1
ffmpy: 0.3.0
gradio-client==0.16.3 is not installed.
httpx: 0.26.0
huggingface-hub: 0.20.3
importlib-resources: 6.1.1
jinja2: 3.1.3
markupsafe: 2.1.5
matplotlib: 3.7.2
numpy: 1.25.2
orjson: 3.6.8
packaging: 23.2
pandas: 2.2.0
pillow: 10.2.0
pydantic: 2.5.3
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.2.2
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.9.0
urllib3: 2.2.0
uvicorn: 0.27.0.post1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2023.12.2
httpx: 0.26.0
huggingface-hub: 0.20.3
packaging: 23.2
typing-extensions: 4.9.0
websockets: 11.0.3

Severity

Blocking usage of gradio

[freddyaboulton]

Yes it's the same thing with the chatbot because of the markdown component. I can repro. I tried adding this package to the vite config but it did not work https://www.npmjs.com/package/vite-plugin-prismjs

cc @pngwn

[shimizust]

Thanks for trying @freddyaboulton. I can run gradio cc build and install the wheel, and that will work as expected. However, that development loop is pretty painful

[shimizust]

Thanks for the quick fix @freddyaboulton !