Vite: Failed to fetch dynamically imported module

[Roy-Kid]

I try to use vite to develop a anywidget, but I can not setup the project by using vite.

When I initialize HelloWidget following manual, I get an error widget.js:237 TypeError: Failed to fetch dynamically imported module:

The minimal reproduced env is:

https://github.com/Roy-Kid/anywidget-vite

Can you provide a full example that how to use vite to dev anywidget?

Thanks a lot!!!!

[manzt]

I'm guessing a duplicate of #586.

D the built-in HMR not work for your use case? We have a TypeScript and React templates.

npm create anywidget@latest

I think there have been some changes with Vite that I haven't been able to address recently. The built-in HMR works very well and is the preferred method, unless you really require a feature that Vite needs it's the most simple route.

That said, thanks for the reproducible example. I'm not sure when I'll be able to have a look to figure out what is going on.

[Roy-Kid]

Thanks a lot for your rapid reply!

I am not sure, but I start my jupyter-lab by using ANYWIDGET_HMR=1 jupyter lab ., so I think HMR should work?

I will try the template first, I hope the template can fix it

My previous error is that render is not a function. So I turn to return an object {initialize(), render()} instead of export function {render}, and it seems this error is fixed. So I this TypeError: Failed to fetch dynamically imported module is another error

[manzt]

I will try the template first, I hope the template can fix it

Thanks for giving it a try! If you'd like to provide more context for why you are using Vite (e.g., familiar tool, bundling dependencies, for React/TypeScript, etc), I can try to give some more pointers.

[Roy-Kid]

I don't mean to use Vite; I just want to find an easy and universal solution to the front-end development environment. I am a chemist so that I can code js/ts, but those front-end scaffolds and configurations are so complex. Vite, I think it is prettystandardn, and most of the lib provides a real example and usage case(for example, for any widget, you have a section to talk about how to use the extension and configure it), so I need to copy and paste.

That's why I want to use Vite, one for all, and I don't need to learn anything else that is not related to my work.

[Roy-Kid]

Update: By reorganizing the project, it will work!! (I don't know what's wrong and don't know how to fix it; I just rewrite everything by using a template and follow the manual. Also with great help from gpt-4o) No need to use Vite currently.

I can also use the experiment widget to pass the data class, super nice features. Next, I need to design a protocol to convert Python API to javascript(e.g move camera, add particle etc.). There is a lib called eel. I don't know if it is possible to support this kind of communication in the future.