Приложение Streamlit не отображает пользовательский компонент из -за проблемы загрузки активов ⇐ Javascript

[Anonymous]

Описание задачи < /h1>
Я интегрирую пользовательский компонент JavaScript с приложением Streamlit. Когда я запускаю app.py, приложение отображает сообщение об ошибке в браузере, указывающее, что оно не может загрузить компонент my_folder_uploader из -за потенциальной задержки сети или настройки прокси.
Сообщение об ошибке < Br /> У вашего приложения возникают проблемы с загрузкой компонента app.my_folder_uploader.
Если это установленное компонент, который работает локально, приложение может быть проблемой с доступа к активам на грани компонентов из -за задержки из сети или настройки прокси. В развертывании вашего приложения.
для получения дополнительной помощи по устранению неполадок, пожалуйста, см. Документы компонента Streamlit или посетите наши форумы. < /p>
Dir Structure < /h1>
my_streamlit_component/
├── frontend/
│ ├── build/ # Webpack output directory
│ ├── src/
│ │ └── MyComponent.jsx
├── package.json
├── webpack.config.js
├── .babelrc
└── app.py # Streamlit application
< /code>
фрагмент кода < /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>
Информация о среде < /h1>
python v3.12.6
node.js v22.13.1
React v17.0.2
Webpack v5.97.1
Babel v5.8.38
Windows 11 < /p>
Что я попробовал < /h1>
очистить кэш браузера.
Rechecked Configurational Webpack.
обеспечил правильно установлен компонент React. Правильно на странице приложения Streamlit и позволяйте пользователям выбирать папку для загрузки.

Подробнее здесь: https://stackoverflow.com/questions/794 ... sset-loadi