Setting up repl - "Uncaught Error: No CodeMirror editor found" with Vite + React

[AdrianLThomas]

Hello,
No doubt I'm doing something stupid. I was following the guide here to setup the repl component but I keep getting an error in the console:

Uncaught Error: No CodeMirror editor found

Looks like this is intentionally thrown when it can't be found, but I'm not sure why this would be.

Here's an example on a branch here (just run npm i && npm run dev to run).

PGlite is otherwise working for me.

Any ideas?

Thanks!

[ldirer]

I ran into the same issue.

This worked for me (I was on 4.23.10):

  "overrides": {
    "@uiw/react-codemirror": "4.23.5"
  },

Not ideal of course :)

Debugging notes:

I tried running the example from the pglite-repl repository and it worked, so I tried to see what was different in my setup and noticed the different lib version.
I think it's due to a change in @uiw/codemirror-react and ref management magic.

This PR seems to have introduced the changes: https://github.com/uiwjs/react-codemirror/pull/717/files

I haven't figured out how this executes exactly and why rcm.current is still null (CodeMirror editor not found) after the component rendered.

[AdrianLThomas]

Thank you for the fix and insights, it works! Glad it wasn't just me 😄

[copiltembel]

@ldirer thank you for pointing this out!
@AdrianLThomas OK if we close this?

[AdrianLThomas]

@copiltembel whilst the issue was introduced with react-codemirror are we convinced it will be resolved? Anyone trying to setup the REPL again will likely hit the same issue going forward...?

Either a permanent fix on the code mirror side (I don't know if they identify there's a problem), or at least documentation update on the PGlite side to clarify the workaround

What do you think?

[copiltembel]

Yes, at the very least we should document this.

[AdrianLThomas]

I've looked a little more at Repl.tsx. I can reproduce the issue after cloning pglite locally and updating to the latest @uiw/react-codemirror package (the package lock file is still on 4.23.5).

I'm not sure where the issue is occurring yet... but I suspect there's some odd timing issue. Perhaps extractStyles is being called too soon?

The fix that the codemirror team put in place was to remove redundant re-rendering... I suspect the REPL component was taking advantage of that before?

I also see some setTimeout's being used in the repl component... are these a workaround?