Monaco Editor causes ClerkJS to fail loading

[jonrose-dev]

• I have reviewed the documentation
• I have searched for existing issues
• I have ensured I am on the most recent version, and checked the changelog for that version
• I have provided the Frontend API key from my application dashboard: pk_test_c21hcnQtdGV0cmEtNi5jbGVyay5hY2NvdW50cy5kZXYk
• I have provided a minimal reproduction or replay recording below

When the monaco editor (@monaco-editor/react) is rendered on app start, Clerk fails to load.

Minimal Reproduction or Replay

• Add the monaco Editor in the app.jsx

import Editor from "@monaco-editor/react";

...

  <Editor language="JSON" />

• Minimal reproduction repo here
• Delaying the loading of the Editor allows Clerk to load without issue, the issue is when the Editor and Clerk attempt to load at the same time

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
• other:

[bripkens]

We have started to experience the same in combination with the Monaco editor.

[bripkens]

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: microsoft/monaco-editor#2283

[jonrose-dev]

@bripkens thanks for the workaround, we've been delaying mounting Monaco by an arbitrary timeout (which is not a great workaround)

[ngnathan]

Also experiencing this issue. @bripkens 's workaround works for now.

[LekoArts]

Hi!

I've looked a bit into this today and also read microsoft/monaco-editor#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>
  );
}

[LekoArts]

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.

[LekoArts]

Hey 👋
As mentioned in my last message, I'll close this. But I opened a PR on our docs repo: clerk/clerk-docs#454
Feel free to chime in there so that the new doc is clear enough. Thanks!