Die Streamlit -App zeigt die benutzerdefinierte Komponente aufgrund eines Problems mit Frontend Asset nicht an ⇐ Python

[Guest]

Problembeschreibung < /h1>
Integriere eine benutzerdefinierte JavaScript -Komponente in eine Streamlit -Anwendung. Wenn ich app.py ausführe, zeigt die App eine Fehlermeldung im Browser an, in der angezeigt wird, dass die Komponente my_folker_uploader aufgrund der potenziellen Netzwerklatenz- oder Proxy -Einstellungen nicht geladen wird.
Fehlermeldung < BR /> Ihre App hat Probleme beim Laden der App.my_Folder_Uploader -Komponente.
Wenn dies eine installierte Komponente ist, die lokal funktioniert In Ihrer App -Bereitstellung.my_streamlit_component/
├── frontend/
│ ├── build/ # Webpack output directory
│ ├── src/
│ │ └── MyComponent.jsx
├── package.json
├── webpack.config.js
├── .babelrc
└── app.py # Streamlit application
< /code>
Code -Snippet < /h1>

app.py

import streamlit as st
import streamlit.components.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)
< /code>

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 (

Folder Uploader


);
};

const ComponentWithConnection = withStreamlitConnection(FolderUploader);

ReactDOM.render(, document.getElementById("root"));
< /code>
Umgebungsinformationen < /h1>
Python v3.12.6
Node.js v22.13.1
reag v17.0.2
Webpack v5.97.1
babel v5.8.38
Windows 11 < /p>
Was habe ich versucht, < /h1>
den Browser -Cache gelöscht.
Weiterholte Webpack -Konfiguration.
Stellen Sie sicher, dass die React -Komponente korrekt montiert ist. Richtig in der Seite streamlit App und ermöglichen den Benutzern, einen Ordner zum Upload auszuwählen.