How can I add a custom React component as an overlay widget in Monaco Editor?

Question

I’m trying to add a custom React component as an overlay widget to the Monaco Editor. I want the widget to appear as a floating overlay on bottom of the editor content, similar to how the built-in search widget functions.

I’ve been able to create React components and render them in my application, but I’m unsure of the best way to integrate a React component specifically as a Monaco overlay widget.

Here’s what I’ve tried so far:

class MonacoInputQuickActionsWidget {
  constructor(actionsHandler: MonacoInputQuickActions['onClick']) {
    this.domNode = document.createElement("div");
    this.domNode.className = "custom-widget";

    const widgetRoot = createRoot(this.domNode);

    widgetRoot.render(
      <MonacoInputQuickActions
        onClick={actionsHandler}
        className="absolute bottom-0.5 -right-1.5"
      />
    );

  }


  getId() {
    return "custom.widget";
  }

  getDomNode() {
    return this.domNode;
  }

  getPosition() {
    return {
      preference: monaco.editor.OverlayWidgetPositionPreference.BOTTOM_RIGHT_CORNER,
    };
  }
}

That is throwing an error:

m.createRoot is not a function
    at push../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/client.js.exports.createRoot

Environment:

• React 18.3.1
• Monaco Editor 0.50.0
• Single-spa