Install Monaco Editor in a Redwood app

Has anyone connected the monaco editor to redwood? I’ve installed using yarn: yarn add monaco-editor
The import statement in my Editor component is:
import MonacoEditor from ‘monaco-editor’

After spinning up the app, when I go to the editor route, I receive an error from the node modules that I cannot find any information on:

The requested module ‘/@fs/C:/Users/jeanm/redwoodjs/editorchallenge/web/node_modules/.vite/deps/monaco-editor.js?v=e67e952a’ does not provide an export named ‘default’

Any ideas for debugging, or docs, or examples, or tutorial on implementing Monaco in Redwood.
I see a previous post, but the blog page is no longer up.

Replying to my own post.
Installed @monaco-editor/react

yarn add @monaco-editor/react

In Editor component:
import Editor, { DiffEditor, useMonaco, loader } from ‘@monaco-editor/react’

Also using yjs, y-monaco and y-webrtc.
I currently have the editor up and running in my Redwood app. Editor is a component used on EditorPage. The editor collaborates among multiple instances of the browser on the localhost.
I have a github repository and will publish the link when I have a more mature project.


FYI Any web components in the RedwoodJS monorepo should be installed using

“yarn workspace web add your-package”

By installing just at the project base will likely give you problems when deploying.

For packages used by the api, swap out web for api.

Thank you, I’m sharing this with my team.