Closed jonrose-dev closed 10 months ago
We have started to experience the same in combination with the Monaco editor.
As a workaround, you can wait rendering Monaco and initializing its loader until clerk.loaded
(accessible via const clerk = useClerk();
).
Debugging through the Clerk load attempt, this Monaco issue seems related: https://github.com/microsoft/monaco-editor/issues/2283
@bripkens thanks for the workaround, we've been delaying mounting Monaco by an arbitrary timeout (which is not a great workaround)
Also experiencing this issue. @bripkens 's workaround works for now.
Hi!
I've looked a bit into this today and also read https://github.com/microsoft/monaco-editor/issues/2283 - I don't think that it has to do with UMD/AMD bundling issues in Clerk's case since breakpoint debugging shows that the error is thrown here:
if (!global.Clerk) {
await loadClerkJsScript({
...this.options,
frontendApi: this.frontendApi,
publishableKey: this.publishableKey,
proxyUrl: this.proxyUrl,
domain: this.domain
});
}
if (!global.Clerk) {
throw new Error("Failed to download latest ClerkJS. Contact support@clerk.com.");
}
loadClerkJsScript
should append our script to the body
but when the error is thrown that is not the case. So we'll spend some more time on it why that happens.
Also, here would be the code for the workaround:
import { Editor } from "@monaco-editor/react";
import { useClerk } from "@clerk/nextjs";
export default function Home() {
const clerk = useClerk()
return (
<main>
{clerk.loaded && <Editor />}
</main>
);
}
So I've timeboxed some more time to look into this and unfortunately I couldn't get to the bottom of this.
I've investigated the source code of https://github.com/suren-atoyan/monaco-react and https://github.com/suren-atoyan/monaco-loader/. The latter is responsible for loading monaco from a CDN and appending it to the body
. Somewhere in the interplay of Clerk loading its clerk-js
and Monaco things break. But looking at them individually, they both work.
This is probably not the resolution you wished for the issue, but given that this is an isolated issue with these two libraries and there's a workaround, I'm inclined to close this as I then can spend time on higher-impact issues that help more users. However, I'm also wanting to put this workaround as a more general advice into https://clerk.com/docs/troubleshooting/overview - then it's not lost and might help further down the line.
Hey 👋 As mentioned in my last message, I'll close this. But I opened a PR on our docs repo: https://github.com/clerkinc/clerk-docs/pull/454 Feel free to chime in there so that the new doc is clear enough. Thanks!
When the monaco editor (
@monaco-editor/react
) is rendered on app start, Clerk fails to load.Minimal Reproduction or Replay
Browser/OS
Chrome 116
,Node 16.13
Package + Version
@clerk/clerk-js
@clerk/clerk-react
@clerk/nextjs
@clerk/remix
@clerk/types
@clerk/themes
@clerk/localizations
@clerk/clerk-expo
@clerk/backend
@clerk/clerk-sdk-node
@clerk/shared
@clerk/fastify
@clerk/chrome-extension
gatsby-plugin-clerk
build/tooling/chore