Bug: External libraries not supported

[viko42]

When you ask to make components with external libraries, the app will crash.
Example:
A component with a lottie animation

It will try to start the require("lottie")

Quick fix: Add to the prompt: "Do not use external libraries"

[raidendotai]

• the prompt is already there, see this line. GPT does like to do some free thinking indeed

• the ping mechanism after component generation is there to prevent app crash on components that cannot import properly, see this function.

  when the webapp does not ping back after process.env.REACT_WEBAP_COMPONENT_PING_INTERVAL_MS (5 seconds by default), the new component is added to openv0_server/generated/export_ignore.txt and the webapp components folder is rebuilt without the problematic component

• we definitely need some babel + imports validation to improve this process

[EricSimons]

One idea: you could actually enable usage of 3rd party libraries via the WebContainer API by running a real vite dev server within the webpage that displays the AI-generated components. When a package needs to be installed, you kick off an npm install, and after installation succeeds just update the component code in the filesystem that leverages it.

Lots of possibilities I think for leveraging WebContainers here imo 👀 Happy to discuss / help if of interest!