I am trying to use an example from the panel documentation of how to display a panel component from python using pyodide, but from a react component, instead of from pure html.
I have set up a minimal NextJS react app which can be cloned, and ran locally simply with npm i && npm start
. My example works for simple python code returning a string or number, but when I attempt to use it with the example panel code for a simple slider I am unsure what to return in order for react to render the slider.
The python code is contained in src/App.js. I am simply overwriting the myPythonCodeString variable from the panel code to a simple 1+9 arithmetic to demonstrate it works in that simple case.
Any help would be much appreciated.
Edit: I have added commits to this repo fixing the problem, the state of the repo when this question was asked can be seen in commit 3c735653dda0e873f17a98d0fb74edaca367ca00.
Thanks to @TachyonicBytes for the assistance in solving this. As they said, there were 2 issues, one was that the scripts needed to be loaded synchronously, one after another in sequence, I did this using the useScript hook from the usehooks-ts library. The other was that I needed to create a div with an id matching that of the servable target in the panel component in the python code.
A github repo with the working app with the corrections in can be viewed here
The component which runs the python code with pyodide looks like so:
And example usage looks like:
The result being: