Problem Description

I'm integrating a custom JavaScript component with a Streamlit application. When I run app.py, the app displays an error message in the browser indicating it cannot load the my_folder_uploader component due to potential network latency or proxy settings.

Error message

Your app is having trouble loading the app.my_folder_uploader component. If this is an installed component that works locally, the app may be having trouble accessing the component frontend assets due to network latency or proxy settings in your app deployment. For more troubleshooting help, please see the Streamlit Component docs or visit our forums.

Dir Structure

my_streamlit_component/
├── frontend/
│   ├── build/                   # Webpack output directory
│   ├── src/
│   │   └── MyComponent.jsx
├── package.json
├── webpack.config.js
├── .babelrc
└── app.py                       # Streamlit application

Code Snippet

app.py

import streamlit as st
import streamlitponents.v1 as components

_component_func = components.declare_component(
    "my_folder_uploader",
    path="frontend/build"  # Ensure this path points to the correct build directory
)

def my_folder_uploader():
    files = _component_func()
    return files

st.title("Folder Uploader")
uploaded_files = my_folder_uploader()

if uploaded_files is not None:
    st.write("Uploaded files in the folder:")
    for file in uploaded_files:
        st.write(file)

MyComponent.jsx

// MyComponent.jsx
import React, { useCallback } from "react";
import ReactDOM from "react-dom";
import { withStreamlitConnection, Streamlit } from "streamlit-component-lib";

const FolderUploader = () => {
  const handleFiles = useCallback((event) => {
    const files = event.target.files;
    const fileArray = Array.from(files).map(file => file.webkitRelativePath);
    Streamlit.setComponentValue(fileArray);
  }, []);

  return (
    <div>
      <h1>Folder Uploader</h1>
      <input type="file" webkitdirectory="true" onChange={handleFiles} />
    </div>
  );
};

const ComponentWithConnection = withStreamlitConnection(FolderUploader);

ReactDOM.render(<ComponentWithConnection />, document.getElementById("root"));

Environment Information

Python v3.12.6 Node.js v22.13.1 React v17.0.2 Webpack v5.97.1 Babel v5.8.38 Windows 11

What I've Tried

Cleared the browser cache. Rechecked Webpack configuration. Ensured the React component is correctly mounted.

Expected Outcome

The custom JavaScript component should render correctly within the Streamlit app page and allow users to select a folder for upload.