Gradio 5.0.2 build custom Image component fails in dev and build mode

[JRGit4UE]

Describe the bug

On my WSL with Ubuntu 20.04 and Gradio 5.0.2 in a conda environment, containing Python 3.10.15 (pip 24.2) and Node 20.10 (npm 10.2.3)
when I successfully create

gradio cc create MyImage --template Image

and test the frontend service via

cd myimage
gradio cc dev

on FireFox localhost:7861 shows an error

same on Chrome.

When building the component via

gradio cc build

the following errors occur:

Building package in myimage                                                                                       
 🔢 Package will use version 0.0.1 defined in pyproject.toml file. Set --bump-version to automatically bump the       
 version number.                                                                                                      
 ✅ Documentation generated in demo/space.py and README.md. Pass --no-generate-docs to disable auto documentation.    
                 
 🟠  The docs were generated in simple mode. Updating python to a more recent version will result in richer            
 documentation.                                                                                                       
 🎨 Building frontend                                                                                                 
 🟥 Build failed!                                                                                                      
 10:54:17 PM  hmr is enabled but compilerOptions.dev is false, forcing it to true                                     
 10:54:18 PM  options.hot is enabled but does not work on production build, forcing it to false                       
 10:54:18 PM  you are building for production but compilerOptions.dev is true, forcing it to false                    
 x Build failed in 753ms                                                                                              
 node:internal/process/promises:289                                                                                   
             triggerUncaughtException(err, true /* fromPromise */);                                                   
             ^                                                                                                        
                                                                                                                      
 : Rollup failed to resolve import "@gradio/markdown" from                                                            
"/home/test/myimage/frontend/node_modules/@gradio/atoms/src/Info.svelte".                                
 This is most likely unintended because it can break your application at runtime.                                     
 If you do want to externalize this module explicitly add it to                                                       
 `build.rollupOptions.external`                                                                                       
     at viteWarn                                                                                                      
 (file:///home/test/myimage/frontend/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:65532:17)        
     at onRollupWarning                                                                                               
 (file:///home/test/myimage/frontend/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:65564:5)          
     at onwarn (file:///home/test/myimage/frontend/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:65227:7) 
     at file:///home/test/myimage/frontend/node_modules/rollup/dist/es/shared/node-entry.js:19393:13           
     at Object.logger                                                                                                 
 (file:///home/test/myimage/frontend/node_modules/rollup/dist/es/shared/node-entry.js:21119:9)                 
     at ModuleLoader.handleInvalidResolvedId                                                                          
 (file:///home/test/myimage/frontend/node_modules/rollup/dist/es/shared/node-entry.js:20008:26)                
     at file:///home/test/myimage/frontend/node_modules/rollup/dist/es/shared/node-entry.js:19966:26 {         
   watchFiles: [                                                                                                      
     '/home/test/myimage/frontend/Index.svelte',                                                               
     '/home/test/myimage/frontend/package.json',                                                               
     '/home/test/myimage/frontend/shared/ImagePreview.svelte',                                                 
     '/home/test/myimage/frontend/shared/ImageUploader.svelte',                                                
     '/home/test/myimage/frontend/node_modules/@gradio/atoms/src/index.ts',                                    
     '/home/test/myimage/frontend/node_modules/@gradio/icons/src/index.ts',                                    
     '/home/test/myimage/frontend/node_modules/@gradio/statustracker/index.ts',                                
     '/home/test/myimage/frontend/shared/Image.svelte',                                                        
     '/home/test/myimage/frontend/Example.svelte',                                                             
     '/home/test/myimage/frontend/shared/Webcam.svelte',                                                       
     '/home/test/myimage/frontend/node_modules/@gradio/utils/src/index.ts',                                    
     '/home/test/myimage/frontend/shared/utils.ts',                                                            
     '/home/test/myimage/frontend/node_modules/@gradio/wasm/svelte/index.ts',                                  
     '/home/test/myimage/frontend/node_modules/@gradio/upload/src/index.ts',                                   
     '/home/test/myimage/frontend/shared/ClearImage.svelte',                                                   
     '/home/ftt/miniconda3/envs/fotoboximage/lib/python3.10/site-packages/gradio/templates/frontend/assets/svelte/sve 
 lte-submodules.js',                                                                                                  
     '/home/test/myimage/frontend/node_modules/@gradio/client/src/index.ts',                                   
     '/home/test/myimage/frontend/shared/WebcamPermissions.svelte',                                            
     '/home/test/myimage/frontend/shared/stream_utils.ts',                                                     
     '/home/test/myimage/frontend/node_modules/@gradio/statustracker/static/Toast.svelte',                     
     '/home/test/myimage/frontend/node_modules/@gradio/statustracker/static/Loader.svelte',                    
     '/home/test/myimage/frontend/node_modules/@gradio/statustracker/static/index.svelte',                     
     '/home/test/myimage/frontend/node_modules/@gradio/statustracker/static/StreamingBar.svelte',              
     '/home/test/myimage/frontend/node_modules/@gradio/atoms/src/Block.svelte',                                
     '/home/test/myimage/frontend/node_modules/@gradio/atoms/src/BlockTitle.svelte',                           
     '/home/test/myimage/frontend/node_modules/@gradio/atoms/src/IconButton.svelte',                           
     '/home/test/myimage/frontend/node_modules/@gradio/atoms/src/Empty.svelte',                                
     '/home/test/myimage/frontend/node_modules/@gradio/atoms/src/Info.svelte',                                 
     '/home/test/myimage/frontend/node_modules/@gradio/atoms/src/BlockLabel.svelte',                           
     '/home/test/myimage/frontend/node_modules/@gradio/atoms/src/ShareButton.svelte'                           
   ]                                                                                                                  
 }                                                                                                                    
                                                                                                                      
 Node.js v20.10.0                                                                                                     
                                                                                                                      
 vite v5.4.8 building for production...                                                                               
 transforming...                                                                                                      
 ✓ 23 modules transformed.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr
from gradio_myimage import MyImage


example = MyImage().example_value()

demo = gr.Interface(
    lambda x:x,
    MyImage(),  # interactive version of your component
    MyImage(),  # static version of your component
    # examples=[[example]],  # uncomment this line to view the "example version" of your component
)


if __name__ == "__main__":
    demo.launch()

Screenshot

No response

Logs

No response

System Info

WSL2 with Ubuntu 20.04 (Win 10)
Gradio 5.0.2
Python 3.10
Node 20.10

Severity

Blocking usage of gradio

[freddyaboulton]

Should be fixed in #9711

[freddyaboulton]

Should be fixed if you install the latest npm versions of @gradio packages.

1. cd frontend
2. npx npm-check-updates -u
3. npm update
4. npm i

Then cd .. and run the dev server again. Manually updating the npm packages won't be necessary in the next gradio release.