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...