I'm wondering if there is any solution I can detect an infinite loop in the script or force stop the pyodide by running

This page says that

These docs are current as of Next 13. In the future, this will become easier with Client Components

App router is out of beta in 13.4

I got this error after I update the version from v1.0.6 to the latest one.
It's fine if I downgrade back to v1.0.6 but wondering what causes this error.

..\node_modules\react-py\dist\index.js:1
import { PythonProvider } from './providers/PythonProvider';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I really love this project (not a web-developer myself but I want to start building something with it).
I was just wondering if you can plot using matplotlib or something similar like plotly which is more web based.

function read() {
const file = readFile('/hello.txt')
console.log(file)
}

when I run read(), error occur:
Unhandled Runtime Error
ErrnoError: FS error
Error: <generic error, no stack>
comlink.mjs:51 Uncaught (in promise) <generic error, no stack>

is this because readFile return Promise | undefined ?

I want to Wrap my app with component, then use usePython in other place, however,

I just import { PythonProvide } from 'react-py' even not used then Failed to compile occurd

Environment

• OS: Windows 10
• Node.js: v14.17.1
• npm: v6.14.13
• React: v18.2.0

the same code in my own pc which is npm: 8.7.0 works well

call stack

"./node_modules/react-py/dist/providers/PythonProvider.js 240:63
Module parse failed: Unexpected token (240:63)
You may need an appropriate loader to handle this file type.
| _a.trys.push([1, 3,, 4]);
|
|> url = new URL('../workers/service-worker', import.meta.url);
| return [4
| /yield/"

I want to know if my platform version too old， or someother reason cause this error

import statement:
'use client'
import { usePythonConsole } from 'react-py';

using next.js

error /mnt/c/Users/USER/Desktop/PROJECT/node_modules/react-py/dist/index.js:1
import { PythonProvider } from './providers/PythonProvider';

How can i run turtle and tkinter?

packages={{
official: [],
micropip: ["turtle"],
}}

app-index.js:31 Error loading Pyodide: PythonError: Traceback (most recent call last):
File "/lib/python311.zip/_pyodide/_base.py", line 540, in eval_code_async
await CodeRunner(
File "/lib/python311.zip/_pyodide/_base.py", line 363, in run_async
coroutine = eval(self.code, globals, locals)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "", line 2, in
ModuleNotFoundError: The module 'pyodide-http' is included in the Pyodide distribution, but it is not installed.
You can install it by calling:
await micropip.install("pyodide-http") in Python, or
await pyodide.loadPackage("pyodide-http") in JavaScript
See https://pyodide.org/en/stable/usage/loading-packages.html for more details.

at new_error (pyodide.asm.js:9:14992)
at pyodide.asm.wasm
at pyodide.asm.wasm
at _PyCFunctionWithKeywords_TrampolineCall (pyodide.asm.js:9:128013)
at pyodide.asm.wasm
at pyodide.asm.wasm
at pyodide.asm.wasm
at pyodide.asm.wasm
at pyodide.asm.wasm
at pyodide.asm.wasm
at pyodide.asm.wasm
at pyodide.asm.wasm
at pyodide.asm.wasm
at pyodide.asm.wasm
at pyodide.asm.wasm
at Module.callPyObjectKwargs (pyodide.asm.js:9:75497)
at Module.callPyObject (pyodide.asm.js:9:75942)
at wrapper (pyodide.asm.js:9:57697)

Is there a straight forward way to implement notebook like interface using this library (like jupyterlite / jupyterlab)? I I have been experimenting with usePythonConsole and I've found that it might work quite well.
I'm asking this mainly because the whole Pyodide ecosystem is new and there is not much info out there, especially regarding notebook interfaces which should now be relatively easy to implement with libraries like this one.
Thanks for any suggestions and keep up the good work.

I want to upload files like excel or image, in order to write it to file system, I have to convert it to base64 string:

    const handleFileToFS = (file: File) => {
        const fileReader = new FileReader();
        fileReader.onload = function (event: ProgressEvent<FileReader>) {
            if (!event.target?.result) return;
            const base64String = (event.target.result as string).split(",")[1]; 
            writeFile(file.name.toString(), base64String);
        };
        fileReader.readAsDataURL(file);
    };

And in python, I have to read it like this:

import pandas as pd
import base64
from io import BytesIO

with open('file.xlsx', 'r') as f:
    base64_string = f.read()

base64_bytes = base64.b64decode(base64_string)
excel_file = BytesIO(base64_bytes)
df = pd.read_excel(excel_file)
...

If I want to download the files, I should use const base64String = await readFile(fileName); to get the data,
so in python I should use base64 to save files.

This is not convenient, are there better ways?

I'm using NextJS:

'use client'

import { useState } from 'react'
import { usePython } from 'react-py'

const packages = {
  official: ['pandas'],
  micropip: ['pandas'], 
}


export default function Home() {
  const [input, setInput] = useState('')

  // Use the usePython hook to run code and access both stdout and stderr
  const { runPython, stdout, stderr, isLoading, isRunning } = usePython(packages)

  return (
      
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <>
      {isLoading ? <p>Loading...</p> : <p>Ready!</p>}
      <form>
        <textarea
          onChange={(e) => setInput(e.target.value)}
          placeholder="Enter your code here"
        />
        <input
          type="submit"
          value={!isRunning ? 'Run' : 'Running...'}
          disabled={isLoading || isRunning}
          onClick={(e) => {
            e.preventDefault()
            runPython(input)
          }}
        />
      </form>
      <p>Output</p>
      <pre>
        <code>{stdout}</code>
      </pre>
      <p>Error</p>
      <pre>
        <code>{stderr}</code>
      </pre>
    </>

    
    </main>
  );
}

ERROR:

Traceback (most recent call last):
ModuleNotFoundError: The module 'asciitree' is included in the Pyodide distribution, but it is not installed.
You can install it by calling:
await micropip.install("asciitree") in Python, or
await pyodide.loadPackage("asciitree") in JavaScript
See https://pyodide.org/en/stable/usage/loading-packages.html for more details.

https://pyodide.org/en/stable/usage/api/js-api.html#pyodide.loadPackagesFromImports

If this is implemented we no longer have to define packages that coming from pyodite distro

Hi, do you know why I am receiving this error?

Error in /turbo_modules/react-py@1.10.5/dist/index.js (7:33)
import.meta may only appear in a module

I created a React + JS project in StackBlitz (as default as you can get) and loaded the code found at the top of the README.

Here's the link: https://stackblitz.com/edit/stackblitz-starters-qmmncv?file=src%2FApp.js

Thank you!

Hi,

I planned to execute Python code on my React and I tried multiple versions of React hooks and js libraries. I also tried this one sometime before but it does not work directly in Vite. Then I did quite a bit of research and managed to get Pyodide Ver 0.25 worker embedded in my React project (can execute code and install package). I may not be able to provide PR but I can provide my version of worker to provide some insights to make a Vite version of this work directly.

My Pyodide worker: https://github.com/siraisisatoru/react-markdown-template/blob/main/src/utils/js/py_worker.js
My Pyodide initialisation useAsync: https://github.com/siraisisatoru/react-markdown-template/blob/fa92e739b3b953695a69158ad2a608f65e6a155f/src/utils/markdownRender.jsx#L227
My Pyodide execution: https://github.com/siraisisatoru/react-markdown-template/blob/fa92e739b3b953695a69158ad2a608f65e6a155f/src/utils/codeblock.jsx#L42

According to pyodide runPython can return a value https://pyodide.org/en/stable/usage/quickstart.html?highlight=expression#running-python-code
I was looking to the code and I see that you wrap the run call into an exec method which is part of the problem here.
Right now I don't really understand why this wrapper is here and I assume that's because I'm pretty new to the python engine.
In an other hand I don't see how to get anything else then stdout and/or stderr with this hook.

I'll be happy to contribute if you think that could be a great enhancement to get the result of code execution and/or share some variables like globals for exemple.

Hello,

Is it ok to have lots of CodeEditor on the same page (~10 ?). It looks laggy and takes quite some time to be able to run one, but I am not sure that's the reason.
If so, what would be the best practice ? Use the same usePython object for each CodeEditor ?

Im having issues reading files back from the pyodide file system. The files are empty.

Reproduction:
https://github.com/Joehoel/react-pyodide

Run with npm i && npm run build && npm run preview

I have an implementation that uses tabs and imports, https://www.actuarialopensource.org/book/welcome. I'm curious if it is possible to provide such an implementation directly in this package so that I'm not rolling my own implementation and maybe can benefit from the broader community that depends on this package.

Hello,

Thank you so much for creating this project! It has been a valuable resource for me. I have a suggestion for a potential improvement - currently, the input command of Python is not working within your library. I was wondering if it would be possible to add an alert box that waits for user input instead? This would greatly enhance the user experience and make this lib even more useful.

Thank you for considering my suggestion.

Sincerely,
Oliver

Allow a diffferent pyodide, for example:

In pyodide_worker.ts

importScripts('https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js')

How about something like:

importScripts(window.PYODIDE_SCRIPT || 'https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js')

without using AGG, it still work. how dose it work, and can I achieve this too use react-py package?

I try the same code in my website but there are errors "ImportError: cannot import name 'document' from 'js'"

When trying to use the module with Parcel, the compilation fails:

@parcel/transformer-js: Web workers cannot have imports or exports without the `type: "module"` option.

  proj/node_modules/react-py/dist/hooks/usePython.js:80:41
    79 |     var createWorker = function () {
  > 80 |         var worker = new Worker(new URL('../workers/python-worker', import.meta.url));
  >    |                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^ The environment was originally created here
    81 |         workerRef.current = worker;
    82 |     };

  💡 Add {type: 'module'} as a second argument to the Worker constructor.
  📝 Learn more: https://parceljs.org/languages/javascript/#classic-scripts

This is triggered by this import in worker.js:

import { expose } from 'comlink';

Replacing this line with these 2 makes the error go away:

importScripts('https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/comlink.min.js');
const expose = Comlink.expose;

According to this StackOverflow answer, the {type: 'module'} will soon be accepted by all modern browsers as the second parameter to new Worker(). A (better?) alternative is to configure the builder to inline the comlink dependency.

hi, I have used your new product Pyrepl, and I find it load the official packages fast, just few second.

meanwhile I test this site https://pyodide.org/en/stable/console.html, it load fast too.

but when I use react-py, usePython({ packages }) if there are many packages(all are official), it seems load slowly? it takes many be 1 minute or more.

And If I put all the official packages (nearly 200 packages) in it, the browser will just crash.

why there are difference?

Jupyterlite is also running on pyodide but supports advanced visualization libraries folium and plotly. This is a fascinating feature when coding in the browser. I hope I am able to easily achieve this using react-py.

I'm having truble finishing mimicing the input as prompt.

My Though is on the python side change the builtin function input() to recieve the prompt, and then write it to file. Meanwhile some intervalin the client side js will look for the written file, and once it found, prompt the user for answer which it will write to another file. Back in python- the input function will busy wait to search for the res file, and once found- erase both files, break the loop and return the result.

however I have some problems evaluating the readFile promise during the python busy wait...

Here are some relevant code:

js:

  const { runPython, stdout, stderr, isLoading, isRunning, interruptExecution, readFile, writeFile } =
    usePython();

  const [stdin, setStdin] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await readFile("/test.txt");

        if (stdin === false) {
          setStdin(true);
          const user_input = prompt(res);
          writeFile("/res.txt", user_input);
        }
      } catch (error) {}
    };

    const intervalId = setInterval(() => {
      fetchData();
    }, 1000); 

    // Cleanup the interval when the component is unmounted
    return () => {
      clearInterval(intervalId);
    };
  });

and python (this is what I want to eventually enter instead of the input function):

with open("/test.txt", "w") as f:
  f.write('prompt title')
import time
import os
t = time.time()
while time.time()-t<10:
  print(1)
  time.sleep(1)
  if os.path.isfile("/res.txt"):
    print("in")
    with open("/res.txt") as f:
      print(f.read())
      break

can you help find the bug?
If you think it's good enough (I'm react noob...) you can push it to your great package to enable user input :)

I may be using the usePython hook differently than you intend, but it's currently causing an infinite loop for me.

I have code like:

const { runPython, ... } = usePython();

useEffect(() => {
  const code = ...
  runPython(code)
  ...
}, [runPython, ...]);

The problem is the runPython function isn't memoized, so it gets re-defined on each hook call. This causes useEffect to get triggered in an infinite loop.

I think (?) the fix is to wrap runPython in a useCallback where you define it here:
https://github.com/elilambnz/react-py/blob/main/src/hooks/usePython.ts#L180

You may want to consider doing this for other functions your hooks return, so they won't change for callers on every render.

Give the proper detailed code of how to import python packages in the JS code as the documentation is not clear about the imports in the JS file

When running python code that writes stdout that ends with a newline, output is not returned and is instead prepended to the next output that does end with a new line.

For example, running:

print("hello", end="")

will give no stdout

However, running the following in either the same or another code window will prepend the previously uncaptured output:

print("I really hope this line isn't prepended with the word 'hello'")

Produces:

helloI really hope this line isn't prepended with the word 'hello'

from pyodide.http import pyfetch
import pandas as pd

async def  fun():
    download_url = "./data.csv"
    response = await pyfetch(download_url)
    response = await response.string()
    with open("data.csv", "w") as f_w:
        f_w.write(response)
    nba = pd.read_csv("data.csv")
    return(nba.head())
fun()

I am trying to read and write a csv head using pandas, but nothing returning in the stdout

Hey, this might not be possible to fix due to the way Vite does things with service workers, but I tried running this using Vite, and the pyodide service worker fails to load. I have a basic example here https://stackblitz.com/edit/vitejs-vite-9gtvuh

I have the following error after trying the REPL on https://elilambnz.github.io/react-py :

On firefox & chrome

Is there a way to get the trailing whitespace from prompt? E.g. if someone wants to run x = input("What is your favourite colour?\n"), prompt would have the "\n" or any other whitespace/newline characters as well?

Thank you!

Hi! Is it possible to have multiple terminals running simultaneously and have their output shown separately? I am looking to see the output of two files that are not connected.

For example, if File 1 has this code:

name = input('hello')
print(name)
yeet = input('yeet')
print(yeet)
result = name + yeet
print(result)

File 1's example output:

hello1
1
yeet2
2
12

And File 2 has this code:

friend = 'Fred'
age = 13
print(friend)
print(age)

File 2's output:

'Fred'
13

In most situations, input doesnt block the pyodide worker, it will finish running and back to ready.

Sometimes (most of nextjs hot reload), the pyodide worker blocks. but no prompt and sendInput doesn't work. The block will never top.

isAwaitingInput is always false.

When blocking, the error log shows as below:

And when using input, the stdout will get polluted as below (python code is input("hello world"), the HTML after hello world might be the HTML source code of this page):

Additionally, every time usePython, there will be an error:

Version: 1.10.5
Env: nextjs (vercel and local)

I can't import from js import document.I can't able to imports js in python code.below is the screenshot below

Hello! I get a module error for all the @site imports when I try to load a local instance of the website with yarn start. Anything I'm doing wrong?

Hello,
With docusaurus, the following markdown code is automatically transformed to <CodeEditor>. How to keep uneditable, classic markdown code ?

```python

```

can't reset infinite loop when lazy flag is true.

easiest way to show this is going to the example docusaurus template (which uses the lazy flag):
https://textbook.latenights.me/

and enter the following code:

res = 1
while True:
    res *= 2

when you run and then try to reset stop, the worker is not reseting.

The same can't be seen in the default code editor without the lazy flag (tried here and everything works :https://elilambnz.github.io/react-py/)

Right now the npm package only contains the dist directory, with *.js.map files referencing the non-existing ../src/*.ts paths. This causes builders that care about sourcemaps, such as Parcel, to error out with ENOENT while looking for original ts files.

For comparison, react-monaco-editor ships 2 directories: lib (compiled JS + maps) and src, with main in package.json set to lib/index.js.

After manually removing all .map files, the error disappears.

When I run 'pnpm run start' in the website dir, I get the following error in the browser:

This page crashed.
Hook useColorMode is called outside the <ColorModeProvider>. Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.

Hey! First of all, this project is great 🙏🏻 thanks for all the hard work!

I'm using the new(ish?) input feature; it works well, but I now noticed that if have multiple instances of my code-editor view on the same page, only the last one works well - the other ones don't seem to get the isAwaitingInput set to true..
I guess this is related to how the input is implemented

I tried logging the workers awaiting input, and it seems like they get added to the context but never leave:

  const { workerAwaitingInputIds } = useContext(PythonContext);
  useEffect(() => {
    console.log('workerAwaitingInputIds', workerAwaitingInputIds);
  }, [workerAwaitingInputIds]);

=>

Long output that changes fast can cause slowness in the client side. I sugest that the package will have some num lines trunction threshold.

it can be easily implemented in the usePython hook:

proxy((msg: string) => {
              // Suppress messages that are not useful for the user
              if (suppressedMessages.includes(msg)) {
                return
              }
              setOutput((prev) => [...prev, msg]) // <-------------- count num lines here and stop setting output if above TH
            }),
            proxy(({ id, version }) => {
              setRunnerId(id)
              console.debug('Loaded pyodide version:', version)
            }),
            allPackages
          )
        }

The var numMaxOutputLines can be set in the usePython (-1 default to no truncation)

For my use-case (would be curious how generalized it is) -- I need to mess with the virtual file system. Basically I have one editor that creates a module and the other that runs it -- see screen-capture below.

I've currently got it running by using pyodide + react providers (sans react-py), but I really like the abstraction you have and owuld be excited to integrate. Its easy with the FS API -- perhaps this could be given with the provider? https://pyodide.org/en/stable/usage/api/js-api.html?highlight=fs#pyodide.FS.

I want to be able to install custom packages using micropip. Locally I've got this working (hardcoded, with some hacks...). Bear in mind that web-dev is not my strongsuit but I'm really trying to get good over the next few weeks. Here's my local python-worker.js file:

importScripts("https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js");

import { expose } from "comlink";

const python = {
  async init(id, stdout, onLoad) {
    self.pyodide = await loadPyodide({
      stdout: (msg) => stdout(id, msg),
    });
    await pyodide.loadPackage("micropip");
    const micropip = pyodide.pyimport("micropip");
    await micropip.install('sf-hamilton');
    onLoad(self.pyodide.version);
  },
  async run(code) {
    await self.pyodide.runPythonAsync(code);
  },
};

expose(python);

Re: API, I think the cleanest way might be to provide this as an argument to the PythonProvider?

<PythonProvider
    pip_install={['sf-hamilton']}> 
    <App>...</App>
</PythonProvider>

Happy to help out -- should be pretty easy to implement, just have to wrap my head around the worker abstraction.

On a side-note, any reason python-worker isn't in TS?

Hello:
I have initialized a React project and integrated the code from the react-py getting started documentation into my project. However, I encountered an issue where calling input() returns HTML content instead of the expected behavior. The troubleshooting section of the documentation suggested that this issue might be due to the service worker not being registered and recommended redoing the steps in the getting started guide. I have carefully followed the instructions in the getting started documentation, but the issue persists, and I am unable to identify the cause.

Steps to Reproduce:

Initialized a React project and set it up according to the react-py getting started documentation.
Integrated the example code from the documentation into my project.
Ran the project and observed that calling input() returns HTML content.
Attempted Solutions:

I referred to the troubleshooting documentation, which mentioned the issue might be related to the service worker not being registered. I ensured the service worker is registered as per the guide.
I have followed the getting started documentation step by step again, but the issue still occurs.

Here is my OS version and node version:
OS Linux version 5.15.133.1-microsoft-standard-WSL2 (root@1c602f52c2e4) (gcc (GCC) 11.2.0, GNU ld (GNU Binutils) 2.37)
node v14.21.3
npm 6.14.18
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-py": "^1.10.7",

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { PythonProvider } from 'react-py'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    <React.StrictMode>
      <PythonProvider>
        <App />
      </PythonProvider>
    </React.StrictMode>

);

App.js

import { useState } from 'react'
import { usePython } from 'react-py'
import './App.css';

function App() {
  const [input, setInput] = useState('')

  // Use the usePython hook to run code and access both stdout and stderr
  const { runPython, stdout, stderr, isLoading, isRunning } = usePython()

  return (
    <>
      {isLoading ? <p>Loading...</p> : <p>Ready!</p>}
      <form>
        <textarea
          onChange={(e) => setInput(e.target.value)}
          placeholder="Enter your code here"
        />
        <input
          type="submit"
          value={!isRunning ? 'Run' : 'Running...'}
          disabled={isLoading || isRunning}
          onClick={(e) => {
            e.preventDefault()
            runPython(input)
          }}
        />
      </form>
      <p>Output</p>
      <pre>
        <code>{stdout}</code>
      </pre>
      <p>Error</p>
      <pre>
        <code>{stderr}</code>
      </pre>
    </>
  )
}

export default App;

Thanks in advance for your help.

Hi, I'm starting to use this in a new project, and really like how simple you make it to use pyodide in a React app (nice work!).

One issue I've run into is how to sanitize user input. I have a user-provided string in JS that I want to use as a parameter for a Python function, very similar to your example here:
https://elilambnz.github.io/react-py/docs/examples/user-input#user-input-field

However, the approach you use there is vulnerable to injecting arbitrary code. For example, I can trick it into running arbitrary Python commands in pyodide, like this:

Any recommendation for how to sanitize a string to prevent this?

Another approach might be to expose the globals object from Pyodide, as described here:
https://pyodide.org/en/stable/usage/faq.html#how-can-i-execute-code-in-a-custom-namespace

Then variables could be set that way instead of via string concatenation. Sounds like that might already be planned?

loading pyodide_http only when it's relevant can make the inital loading faster.

Hey there! I've been using multiple codeBlocks with react-py and noticed that pyodide is also being loaded multiple times. This is a bit surprising to me because I'm only using one PythonProvider. Unfortunately, this is causing my page to load a bit slower.

I don't see tests in the project. Maybe for the example implementations (like https://elilambnz.github.io/react-py/docs/examples/custom-modules) we can have some tests written in Playwright allowing iteration on the underlying logic while maintaining confidence in the behavior of the software?

just tested my next js site with the service worker and it seems that on pages with multiple code editors the initialization flow doesn't ends and crashes the page at some point. tested it with iphone 13 on safari & brave. as of 2023/08/22 you can see an example problematic page here: https://www.academonkeys.com/learn-python-hebrew
The running of the page is flaky and in my testing breaking ~50% of the times.