Closed duerrsimon closed 6 months ago
@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!
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.
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 😅
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.
@duerrsimon This should all be fixed in the next release. Apologies for the delay!
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
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.
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.
Ah right. We'll try to get a release out in the next day or so.
4.28.0 is out now @duerrsimon ! Curious to see if it fixes the issue in your end.
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
@freddyaboulton this is the same issue as this one #8138
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? 🔎
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
Severity
Blocking usage of gradio