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 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

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

zhangzhengde0225 commented Nov 9, 2024 •

edited

Loading

kyamagu commented Nov 25, 2024 •

edited

Loading