Custom Component break on JS Import for some libraries

[duerrsimon]

Describe the bug

Importing the smiles-drawer library completely breaks the custom component dev server. It's the import alone that breaks the dev server.

The dev server gets stuck on the loading screen with some errors in JS Dev Console. Terminal log has no errors.

The package is correctly installed in frontend/node_modules

Have you searched existing issues? 🔎

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

Reproduction

Here is a repo with the offending line

https://github.com/duerrsimon/molecule2d/blob/dc7e1a3ef52efe25de2580a6eba70aedfeeb026b/frontend/Molecule.svelte#L5

Here is a reproduction that it in a non-gradio svelte environment this works normally: https://codesandbox.io/s/relaxed-einstein-7l8cx8?file=/Molecule.svelte

Screenshot

No response

Logs

No response

System Info

Package JSON: {
  "name": "molecule2d",
  "version": "0.4.0-beta.6",
  "description": "Gradio UI packages",
  "type": "module",
  "author": "",
  "license": "ISC",
  "private": false,
  "main_changeset": true,
  "exports": {
    ".": "./Index.svelte",
    "./example": "./Example.svelte",
    "./package.json": "./package.json"
  },
  "dependencies": {
    "@gradio/atoms": "0.2.0-beta.4",
    "@gradio/icons": "0.2.0-beta.1",
    "@gradio/statustracker": "0.3.0-beta.6",
    "@gradio/utils": "0.2.0-beta.4",
    "smiles-drawer": "^2.1.7"
  }
}

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 3.45.0b13
gradio_client version: 0.7.0b0

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

aiofiles: 23.2.1
altair: 5.1.1
fastapi: 0.103.1
ffmpy: 0.3.1
gradio-client==0.7.0-beta.0 is not installed.
httpx: 0.25.0
huggingface-hub: 0.17.3
importlib-resources: 6.1.0
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.8.0
numpy: 1.26.0
orjson: 3.9.7
packaging: 23.1
pandas: 2.1.1
pillow: 10.0.1
pydantic: 2.4.1
pydub: 0.25.1
python-multipart: 0.0.6
pyyaml: 6.0.1
requests: 2.31.0
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.8.0
uvicorn: 0.23.2
websockets: 11.0.3
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2023.9.2
httpx: 0.25.0
huggingface-hub: 0.17.3
packaging: 23.1
requests: 2.31.0
typing-extensions: 4.8.0
websockets: 11.0.3

Severity

Blocking usage of gradio

[freddyaboulton]

@duerrsimon I can reproduce with the smiles package but not in general.

I created a custom component that installs/imports date-picker-svelte (https://www.npmjs.com/package/date-picker-svelte) and I can import it dynamically in dev mode.

See the repo here: https://github.com/freddyaboulton/gradio-datepicker

Gonna tag @pngwn in case he has thoughts about this!

[duerrsimon]

Yeah. I should have clarified that I am also able to import some other npm packages.

Just not this one and since it works in a vanilla environment I thought I make you aware of it since it completely breaks the component in a non obvious manner instead of failing a bit more gracefully.

[freddyaboulton]

Yea we definitely want to take a look at what's happening specifically with the smiles-drawer! I just got worried that all npm packages were causing dev mode to break so I needed to verify for myself 😅

[pngwn]

Thanks for the repros and clarifications!

I think i know what is happening. I've not verified this but this is probably because the smiles-drawer package uses cjs instead of esm as you can see here:

https://github.com/reymond-group/smilesDrawer/blob/master/app.js#L2-L8

Vite is capable of transforming these cjs modules to esm but we are probably missing some config. I'll take a quick look asap.

[pngwn]

@duerrsimon This should all be fixed in the next release. Apologies for the delay!

[duerrsimon]

I just tried this again with 4.27.0 and now get the following error: `Uncaught (in promise) ReferenceError: can't access lexical declaration 'default' before initialization

http://127.0.0.1:7861/@fs/home/duerr/Dev/GradioBio/molecule2d/frontend/node_modules/smiles-drawer/src/Vertex.js:14 __require http://127.0.0.1:7861/@fs/home/duerr/Dev/GradioBio/molecule2d/frontend/node_modules/smiles-drawer/src/Vertex.js:3 http://127.0.0.1:7861/@fs/home/duerr/Dev/GradioBio/molecule2d/frontend/node_modules/smiles-drawer/src/Vertex.js:300 ` This is in a fresh python 3.10 environment, using SimpleTextbox as template, doing `npm install smiles-drawer`, solely adding ` import SmilesDrawer from "smiles-drawer";` in `Index.svelte` This still seems to be related to cjs/esm. Any pointer? It sounds like that specific package worked for you guys in the Pull Request

[pngwn]

We havent released this yet. You would need to install from this PR to test it: https://github.com/gradio-app/gradio/pull/8069

We tested with the smiles-drawer package.

[duerrsimon]

Okay great. I assumed the gradio version in the pull request is the released one since the version number is the same as the latest release. I tried installing gradio client and gradio from the pull request but am unable to use it to generate a new custom component from it since some of the js dependencies like @gradio/atoms 0.7.1 cannot be installed (presumeably because they aren't released yet on npm registry). Also locally, the version of e.g gradio/atoms in gradio/js is 0.7.0.

I'll wait until this is officially released to test.

[pngwn]

Ah right. We'll try to get a release out in the next day or so.

[freddyaboulton]

4.28.0 is out now @duerrsimon ! Curious to see if it fixes the issue in your end.

[duerrsimon]

Thanks for the ping. Seems something is still off.

With the new version I'm able to create a new component but gradio cc dev doesn't yet work with some error related to @gradio/preview I tried this both on my local workstation and on github codespaces in a virgin environment. I also deleted node_modules and package-lock.json from the frontend folder and reinstalled everything. I also installed @gradio/preview using the printed command.

This seems to be the main error:

Error: Cannot find module  /workspaces/molecule2d/frontend/node_modules/@gradio/preview/dist/index.js                 Please verify that the package.json has a valid "main" entry

Full error when running gradio cc dev on Github codespaces with the SimpleTexbox template with no other changes

 /workspaces/molecule2d $ gradio cc dev
♻ Launching demo/app.py in reload mode

╭─────────────────────────────── Traceback (most recent call last) ────────────────────────────────╮
│ /usr/local/python/3.10.13/lib/python3.10/site-packages/gradio/cli/commands/components/dev.py:83  │
│ in _dev                                                                                          │
│                                                                                                  │
│    80 │   )                                                                                      │
│    81 │                                                                                          │
│    82 │   if gradio_node_path.returncode != 0:                                                   │
│ ❱  83 │   │   raise ValueError(                                                                  │
│    84 │   │   │   "Could not find `@gradio/preview`. Run `npm i -D @gradio/preview` in your fr   │
│    85 │   │   )                                                                                  │
│    86                                                                                            │
│                                                                                                  │
│ ╭─────────────────────────────────────────── locals ───────────────────────────────────────────╮ │
│ │                 app = PosixPath('demo/app.py')                                               │ │
│ │ component_directory = PosixPath('/workspaces/molecule2d')                                    │ │
│ │    gradio_node_path = CompletedProcess(args=['/home/codespace/nvm/current/bin/node', '-e',   │ │
│ │                       "console.log(require.resolve('@gradio/preview'))"], returncode=1,      │ │
│ │                       stdout=b'', stderr=b'node:internal/modules/cjs/loader:451\n      throw │ │
│ │                       err;\n      ^\n\nError: Cannot find module                             │ │
│ │                       \'/workspaces/molecule2d/frontend/node_modules/@gradio/preview/dist/i… │ │
│ │                       Please verify that the package.json has a valid "main" entry\n    at   │ │
│ │                       tryPackage (node:internal/modules/cjs/loader:443:19)\n    at           │ │
│ │                       Module._findPath (node:internal/modules/cjs/loader:714:18)\n    at     │ │
│ │                       Module._resolveFilename (node:internal/modules/cjs/loader:1129:27)\n   │ │
│ │                       at Function.resolve (node:internal/modules/helpers:190:19)\n    at     │ │
│ │                       [eval]:1:21\n    at runScriptInThisContext (node:internal/vm:209:10)\n │ │
│ │                       at node:internal/process/execution:109:14\n    at                      │ │
│ │                       [eval]-wrapper:6:24\n    at runScript                                  │ │
│ │                       (node:internal/process/execution:92:62)\n    at evalScript             │ │
│ │                       (node:internal/process/execution:123:10) {\n  code:                    │ │
│ │                       \'MODULE_NOT_FOUND\',\n  path:                                         │ │
│ │                       \'/workspaces/molecule2d/frontend/node_modules/@gradio/preview/packag… │ │
│ │                       requestPath: \'@gradio/preview\'\n}\n\nNode.js v20.12.1\n')            │ │
│ │         gradio_path = '/home/codespace/.python/current/bin/gradio'                           │ │
│ │                host = 'localhost'                                                            │ │
│ │                node = '/home/codespace/nvm/current/bin/node'                                 │ │
│ │         python_path = '/home/codespace/.python/current/bin/python3'                          │ │
│ ╰──────────────────────────────────────────────────────────────────────────────────────────────╯ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
ValueError: Could not find `@gradio/preview`. Run `npm i -D @gradio/preview` in your frontend folder.

This is using node v20.12.1

[duerrsimon]

@freddyaboulton this is the same issue as this one #8138