Your app is having trouble loading the streamlit_drawable_canvas.st_canvas component.

[emptytank]

I had to make some modifications to package.json to be able to compile properly including:

• updating dependencies for "typescript" to "~3.8.0"
• including resolutions for pretty-format: "resolutions": { "**/pretty-format": "25.1.0" },
• updating scripts for start and build: "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts --openssl-legacy-provider build",

However, when i run the streamlit app.py, i get the following error message when trying to load the canvas:

Your app is having trouble loading the streamlit_drawable_canvas.st_canvas component.

(The app is attempting to load the component from ****, and hasn't received its "streamlit " message.)

If this is a development build, have you started the dev server? If this is a release build, have you compiled the frontend? For more troubleshooting help, please see the Streamlit Component docs or visit our forums.

I've also set the _RELEASE = True in the init.py file, and ran npm build in the "frontend" folder.

I also get the below warnings for npm run start:

(webpack)/buildin/global.js There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module identifiers:

• C:\Users\username\GitHub\streamlit-drawable-canvas\streamlit_drawable_canvas\frontend\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\username\GitHub\streamlit-drawable-canvas\streamlit_drawable_canvas\frontend\node_modules\webpack\buildin\global.js Used by 22 module(s), i. e. C:\Users\username\GitHub\streamlit-drawable-canvas\streamlit_drawable_canvas\frontend\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\username\GitHub\streamlit-drawable-canvas\streamlit_drawable_canvas\frontend\node_modules\node-libs-browser\node_modules\punycode\punycode.js
• C:\Users\username\GitHub\streamlit-drawable-canvas\streamlit_drawable_canvas\frontend\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\username\Github\streamlit-drawable-canvas\streamlit_drawable_canvas\frontend\node_modules\webpack\buildin\global.js Used by 2 module(s), i. e. C:\Users\username\GitHub\streamlit-drawable-canvas\streamlit_drawable_canvas\frontend\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\Users\username\Github\streamlit-drawable-canvas\streamlit_drawable_canvas\frontend\node_modules\lodash\lodash.js

Any thoughts on how to resolve?

--

Versions: node = 18.13.0 npm = 8.19.3 python = 3.11.1

[andfanilo]

Hey! Sorry for the late reply, lots of things going on for me :) Anyway, I was wondering

• for the _RELEASE=False, were you also running the dev server?
• for the build part, I was not aware of those new React instructions, where did you pick them from? There may be some dependency resolution problems...