Cross-origin error

Custom Components
1

Hi, how can I fix

A cross-origin error was thrown. React doesn’t have access to the actual error object in development.
I am using the templates and installed a new component via npm install react-compound-slider.

I have tried
--server.enableCORS=false --server.enableXsrfProtection=false --server.enableWebsocketCompression=false
Thank you.

2

Hey @Chong_Toby, welcome to Streamlit!

This sounds like a frontend error - that is, something in your component’s frontend is triggering an exception, and then React is catching that exception, but it’s not able to show you the exception for some browser security reason.

You say you’re using the template - have you made any modifications to the code itself, or was this triggered just by installing the react-compound-slider npm package?

Also: if you open your browser’s developer console view, do you see any errors being reported in there?

image
image1888×2158 920 KB

(Edit: for more context on “cross-origin errors” within React - which I was also unfamiliar with - see https://reactjs.org/docs/cross-origin-errors.html)

3

Thank you!
It turns out to be some error in my react code. I am able to see the error in the console, it would be nice if we can put some hint on where to look in streamlit interface too.

4

Agree! I’ve created a task to make this less mysterious when it happens.