Custom components don't work #9879

moreauadrien · 2024-10-31T17:36:48Z

Describe the bug

I tried to create a custom component and the templates don't seem to work.

Have you searched existing issues? 🔎

I have searched and found no existing issues

Reproduction

gradio cc create MyComponent --template SimpleImage
cd mycomponent
gradio cc dev

Screenshot

♻ Launching demo/app.py in reload mode

Watching: '/home/adrien/.local/lib/python3.10/site-packages/gradio',
'/home/adrien/Developement/gradio_test/mycomponent/frontend',
'/home/adrien/Developement/gradio_test/mycomponent/demo',

'/home/adrien/Developement/gradio_test/mycomponent'



* Backend Server:  http://127.0.0.1:7864



Re-optimizing dependencies because vite config has changed

Failed to resolve dependency: svelte/animate, present in 'optimizeDeps.include'

Failed to resolve dependency: svelte/easing, present in 'optimizeDeps.include'

Failed to resolve dependency: svelte/internal, present in 'optimizeDeps.include'

Failed to resolve dependency: svelte/internal/disclose-version, present in 'optimizeDeps.include'

Failed to resolve dependency: svelte/motion, present in 'optimizeDeps.include'

Failed to resolve dependency: svelte/store, present in 'optimizeDeps.include'

Failed to resolve dependency: svelte/transition, present in 'optimizeDeps.include'

Failed to resolve dependency: svelte, present in 'optimizeDeps.include'

Frontend Server (Go here): http://localhost:7865/

[1mThe TypeScript option verbatimModuleSyntax is now required when using Svelte files with
lang="ts". Please add it to your tsconfig.json.[0m

6:26:29 PM  /home/adrien/Developement/gradio_test/mycomponent/frontend/Index.svelte:28:1 'Block'is not defined

6:26:29 PM  /home/adrien/Developement/gradio_test/mycomponent/frontend/Index.svelte:40:2'StatusTracker' is not defined

6:26:29 PM  /home/adrien/Developement/gradio_test/mycomponent/frontend/Index.svelte:46:2'ImagePreview' is not defined

6:26:29 PM  /home/adrien/Developement/gradio_test/mycomponent/frontend/Index.svelte:55:1 'Block' is not defined

6:26:29 PM  /home/adrien/Developement/gradio_test/mycomponent/frontend/Index.svelte:67:2 'StatusTracker' is not defined

6:26:29 PM  /home/adrien/Developement/gradio_test/mycomponent/frontend/Index.svelte:74:2 'ImageUploader' is not defined

6:26:29 PM  /home/adrien/Developement/gradio_test/mycomponent/frontend/Index.svelte:85:3 'UploadText' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImagePreview.svelte:9:0 'BlockLabel' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImagePreview.svelte:11:7 'ImageIcon' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImagePreview.svelte:15:1 'Empty' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImagePreview.svelte:15:41 'ImageIcon' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImagePreview.svelte:17:1 'IconButtonWrapper' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImagePreview.svelte:19:3 'DownloadLink' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImagePreview.svelte:20:4 'IconButton' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImagePreview.svelte:20:22 'Download' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImageUploader.svelte:21:0 'BlockLabel' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImageUploader.svelte:21:31 'ImageIcon' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImageUploader.svelte:25:2 'ClearImage' is not defined

6:26:29 PM /home/adrien/Developement/gradio_test/mycomponent/frontend/shared/ImageUploader.svelte:33:2 'Upload' is not defined

Logs

No response

System Info

❯ python3 -V
Python 3.10.12

❯ pip -V
pip 24.3.1 from /home/adrien/.local/lib/python3.10/site-packages/pip (python 3.10)

❯ node --version
v20.12.2

❯ npm -version
10.5.0

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 5.4.0
gradio_client version: 1.4.2

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

aiofiles: 23.2.1
anyio: 4.3.0
audioop-lts is not installed.
fastapi: 0.115.4
ffmpy: 0.4.0
gradio-client==1.4.2 is not installed.
httpx: 0.27.0
huggingface-hub: 0.26.2
jinja2: 3.1.3
markupsafe: 2.1.5
numpy: 1.26.4
orjson: 3.10.10
packaging: 24.0
pandas: 2.2.3
pillow: 9.0.1
pydantic: 2.9.2
pydub: 0.25.1
python-multipart==0.0.12 is not installed.
pyyaml: 5.4.1
ruff: 0.7.1
safehttpx: 0.1.1
semantic-version: 2.10.0
starlette: 0.41.2
tomlkit==0.12.0 is not installed.
typer: 0.12.5
typing-extensions: 4.11.0
urllib3: 1.26.5
uvicorn: 0.32.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2024.10.0
httpx: 0.27.0
huggingface-hub: 0.26.2
packaging: 24.0
typing-extensions: 4.11.0
websockets: 12.0

Severity

Blocking usage of gradio

The text was updated successfully, but these errors were encountered:

pngwn · 2024-10-31T18:10:49Z

I have been seeing the same issue. Looking into it atm.

zhangzhengde0225 · 2024-11-09T12:24:02Z

I'v fixed this issuse.

You should create a tsconfig.json file the set verbatimModuleSyntax is True, and use npm to install depences.

Details:
cd frondend,
vi tsconfig.json, content:

{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "verbatimModuleSyntax": true,
      "strict": true,
      "moduleResolution": "node",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "skipLibCheck": true,
      "resolveJsonModule": true,
      "types": ["svelte"],
      "baseUrl": "."
    },
    "include": ["src/**/*", "*.svelte"],
    "exclude": ["node_modules"]
}

The key setting is "verbatimModuleSyntax": true,

run command: npm install --save-dev typescript svelte-preprocess @tsconfig/svelte
try to cd .. and run gradio cc dev

pngwn · 2024-11-09T15:06:52Z

Ooooh

kyamagu · 2024-11-25T06:55:10Z

@zhangzhengde0225 's workaround fixed the gradio cc dev error, but I still face the following error on the developer console.

kyamagu · 2024-11-25T09:56:44Z

It seems the error occurs when svelte-i18n imports deepmerge, and the cause is an incompatibility between ESM and CJS. This error does not happen for other templates like SimpleTextbox.

moreauadrien · 2024-11-25T10:27:53Z

Even on SimpleTextbox template, I have this error when I launch gradio cc dev.

kyamagu · 2024-11-26T00:02:37Z

@moreauadrien The following at least solves the verbatimModuleSyntax error:

cd frontend
npm i -D @tsconfig/svelte svelte-preprocess typescript
tee tsconfig.json <<EOF
{
    "extends": "@tsconfig/svelte/tsconfig.json"
}
EOF

However, the dependency of SimpleImage seems broken due to the browser incompatibility with the CommonJS module (svelte-i18n > deepmerge).

kyamagu · 2024-11-26T02:14:04Z

Adding a vite plugin could resolve the CommonJS compatibility issue.

cd frontend
npm i -D vite-plugin-commonjs

frontend/gradio.config.js

import commonjs from "vite-plugin-commonjs";

export default {
  plugins: [
    commonjs({
      filter(id) { return id.includes("node_modules/deepmerge"); }
    })
  ],
  svelte: {
    preprocess: [],
  },
  build: {
    target: "modules",
  },
};

moreauadrien · 2024-11-30T12:00:02Z

I still have these errors in my console but SimpleImage is working anyway. Thanks !

moreauadrien added the bug Something isn't working label Oct 31, 2024

freddyaboulton assigned pngwn Oct 31, 2024

freddyaboulton added the custom-components Related to custom component cli or workflow label Oct 31, 2024

freddyaboulton linked a pull request Nov 1, 2024 that will close this issue

Revert Storybook Version Upgrade to Fix Custom Component Devmode #9893

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom components don't work #9879

Custom components don't work #9879

moreauadrien commented Oct 31, 2024

pngwn commented Oct 31, 2024

zhangzhengde0225 commented Nov 9, 2024 •

edited

Loading

pngwn commented Nov 9, 2024

kyamagu commented Nov 25, 2024 •

edited

Loading

kyamagu commented Nov 25, 2024

moreauadrien commented Nov 25, 2024

kyamagu commented Nov 26, 2024

kyamagu commented Nov 26, 2024

moreauadrien commented Nov 30, 2024

Custom components don't work #9879

Custom components don't work #9879

Comments

moreauadrien commented Oct 31, 2024

Describe the bug

Have you searched existing issues? 🔎

Reproduction

Screenshot

Logs

System Info

Severity

pngwn commented Oct 31, 2024

zhangzhengde0225 commented Nov 9, 2024 • edited Loading

pngwn commented Nov 9, 2024

kyamagu commented Nov 25, 2024 • edited Loading

kyamagu commented Nov 25, 2024

moreauadrien commented Nov 25, 2024

kyamagu commented Nov 26, 2024

kyamagu commented Nov 26, 2024

moreauadrien commented Nov 30, 2024

zhangzhengde0225 commented Nov 9, 2024 •

edited

Loading

kyamagu commented Nov 25, 2024 •

edited

Loading