0

I'm trying to run pyodide in my browser window, but using the following code I'm greeted with the following error:

I'm importing the pyodide cdn with my index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    **<script src="https://cdn.jsdelivr.net/pyodide/v0.21.0/full/pyodide.js"></script>**
    
    <title>React App</title>
  </head>
  <body>
   
    <div id="root"></div>
  
  </body>
</html>

This is my App.js

    import './App.css';

const pythonExec = ()=>{
  const python_code = `
    print('Hello Test')
  `;
  const pyodide = window.pyodide;

  pyodide.runPython(python_code);

};

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Search Ticker Name</h1>
        <button onClick={pythonExec}>Search</button>
      </header>
    </div>
  );
}

export default App;

When I click my button it gives me the following error message:

App.js:9 Uncaught TypeError: Cannot read properties of undefined (reading 'runPython')
    at pythonExec (App.js:9:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1

What am I doing incorrectly to get python to communicate to the browser console? I'm using the latest version of React:

"react": "^18.2.0",
"react-dom": "^18.2.0",
user1470034
  • 671
  • 2
  • 8
  • 23
  • Pyodide does not support importing `requests`. Your code has multiple problems. Use the browser debugger and review each error message. – John Hanley Aug 20 '22 at 19:51
  • Ok, that makes sense. The code didn't have any errors except the one above. I could get the code to work using a print statement inside the HTML using the pyodide call there. However, passing a variable with print(python_code) would cause the same error. The above is as simple as I could make it and not my main code set. – user1470034 Aug 20 '22 at 23:36
  • There is no point in testing code that will not work. The `requests` package is not supported, so do not use it. Rewrite the code to use supported APIs. – John Hanley Aug 21 '22 at 00:01
  • The code has been simplified to use the print statement only, I'm still receiving the same error message. Any idea? – user1470034 Aug 24 '22 at 00:58
  • 1
    Did you init pyodide `const pyodide = await loadPyodide()`? – Aray Karjauv Sep 23 '22 at 12:14
  • I didn't and using await loadPyodide() was what I was missing. Thank you! – user1470034 Sep 24 '22 at 02:22

0 Answers0