Error following custom components docs gradio cc dev (virtual:component-loader)

[abmnv]

Describe the bug

I am following documentation for creating Custom Components on MacOS and getting the following error after running "gradio cc dev" step: "Internal server error: Failed to resolve import "virtual:component-loader" from "frontend/node_modules/@gradio/utils/src/utils.ts?v=365c25ca". Does the file exist?". The file "utils.ts" does exists in the node_modules directory. The error seems to point to Vite virtual modules that may be is not configured properly.

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

gradio cc create MyComponent --template SimpleTextbox
gradio cc dev

Screenshot

Logs

Internal server error: Failed to resolve import "virtual:component-loader" from "frontend/node_modules/@gradio/utils/src/utils.ts?v=365c25ca". Does 
the file exist?

System Info

Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 4.37.1
gradio_client version: 1.0.2

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

aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.111.0
ffmpy: 0.3.2
gradio-client==1.0.2 is not installed.
httpx: 0.27.0
huggingface-hub: 0.23.4
importlib-resources: 6.4.0
jinja2: 3.1.4
markupsafe: 2.1.5
matplotlib: 3.9.0
numpy: 2.0.0
orjson: 3.10.5
packaging: 24.1
pandas: 2.2.2
pillow: 10.3.0
pydantic: 2.7.4
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.4.10
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.12.2
urllib3: 2.2.2
uvicorn: 0.30.1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.6.1
httpx: 0.27.0
huggingface-hub: 0.23.4
packaging: 24.1
typing-extensions: 4.12.2
websockets: 11.0.3

Severity

Blocking usage of gradio

[alpaolo]

The same for me on windows 11 and Wsl2. Node 18 and Node 20 Python 3.10 and 3.12 always the same error. This kind of error doesn't appear only using Button as template. #8669

[freddyaboulton]

@pngwn looks like it could be related to the chatbot changes related to loading components? The issue does not happen in version 4.36.1

[khengyun]

@pngwn looks like it could be related to the chatbot changes related to loading components? The issue does not happen in version 4.36.1

this issue still happend in gradio version 4.36.1

[freddyaboulton]

I can't repro on 4.36.1 with the textbox template!

[khengyun]

This error does not occur if python==3.11.9 and node==v18.20.3, it not affected by gradio version

[alpaolo]

This error does not occur if python==3.11.9 and node==v18.20.3, and gradio==4.36.1 This is the answer on Custom component --template Label:
'''No custom components were found in G:\GRADIO\CUSTOM_COMPONENTS\superlabel. It is likely that dev mode does not work properly. Please pass the --gradio-path and --python-path CLI arguments so that gradio uses the right executables." And nothing load in browser'''

If supply python-path and gradio-path as arguments:

I like Gradio but this kind of error made me crazy ( too much dependency: Node, Svelte, Vite... )

[alpaolo]

Error on wsl2 python==3.11.9 and node==v18.20.3, and gradio==4.37.2

[alpaolo]

I can't repro on 4.36.1 with the textbox template!

Work only with Button template, with other template component no, Textbox too. Is possible there's a combination between components and other frameworks ( Node ? Vite ? Compiler ?) that creates a bad environment. Furthermore, the code in button.svelte calls a minimum quantity of modules....

[pngwn]

I'll fix this next week, it requires a refactor of the @gradio/utils package. We need to split internal utils from general utils.