CODEWITHSUNDEEP
javascriptwebpackmonaco-editordocusaurus
SoftTimur
SoftTimur

Reputation: 5510

Embed a custom Monaco Editor in a Docusaurus website MDX

I have a website built using Docusaurus 2.

Now, I want to embed a Monaco Editor to one page, and I will register a language to that Monaco Editor. I can achieve this with react-monaco-editor, monaco-languageclient and vscode-languageserver in a new React website, but I don't know how to add this to Docusaurus.

First, I added those packages to package.json of my Docusaurus website, then I tried to make a component App, so that I can add <App /> to a Docusaurus page.

In one file for the component, I have:

import MonacoEditor from 'react-monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

In another file for the component, I have:

import { MonacoToProtocolConverter, ProtocolToMonacoConverter } from 'monaco-languageclient/lib/monaco-converter';
import * as monaco from 'monaco-editor';
import { TextDocument } from "vscode-languageserver";

Then I got

./node_modules/monaco-editor/esm/vs/base/browser/ui/codiconLabel/codicon/codicon.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

And

./node_modules/vscode-languageserver/lib/files.js
Module not found: Can't resolve 'child_process' in '/Users/chengtie/Startup/PRODSERVER/10StudioWebsite/newWebsite/node_modules/vscode-languageserver/lib'

enter image description here

Does anyone know what to do make it work?

Upvotes: 3

Views: 1336

Answers (1)

Yangshun Tay
Yangshun Tay

Reputation: 53169

Seems like the issue here is regarding the CSS being unable to loaded by webpack. You will need to add in CSS loaders for webpack via plugins.

You can try referring to this Pull Request on the Hermes website which adds the Monaco editor to the website and you can try the editor by clicking on "Playground".

Using monaco-editor-webpack-plugin might be better here because it helps you add the necessary loaders, such as the CSS loader you are missing in your current setup.

Upvotes: 4

Related Questions