Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
MonacoEditor
✓ import MonacoEditor from 'react-monaco-editor';
✗ import { MonacoEditor } from 'react-monaco-editor';
The main component is a default export. Using named import will result in an error.
MonacoWebpackPlugin
✓ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
✗ import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
This is a Webpack plugin (a separate package) used in `webpack.config.js` for bundling Monaco Editor assets. It's typically consumed via CommonJS `require` in Node.js-based Webpack configurations.
MonacoEditorProps, EditorDidMount
✓ import type { MonacoEditorProps } from 'react-monaco-editor';
import type { editor } from 'monaco-editor';
type EditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: typeof editor) => void;
✗ import { MonacoEditorProps, EditorDidMount } from 'react-monaco-editor';
For TypeScript users, import types using `import type`. The `editorDidMount` callback exposes `editor` (IStandaloneCodeEditor) and `monaco` (the global monaco API instance). The specific `EditorDidMount` type shown here reflects the signature of the callback, using types from `monaco-editor`.
This quickstart renders a full-height, interactive Monaco editor instance within a React component. It demonstrates initial value setting, language configuration, theme selection, and how to handle `onChange` and `editorDidMount` events, including adding a custom editor command. It is designed to be directly runnable within a modern React setup using `createRoot`.
import React from 'react';
import { createRoot } from "react-dom/client";
import MonacoEditor from 'react-monaco-editor';
interface AppState {
code: string;
}
class App extends React.Component<{}, AppState> {
constructor(props: {}) {
super(props);
this.state = {
code: `function helloWorld() {
console.log("Hello, Monaco!");
// You can customize language, theme, and options.
const now = new Date();
return \`Current time: \${now.toLocaleTimeString()}\`;
}`,
};
this.onChange = this.onChange.bind(this);
this.editorDidMount = this.editorDidMount.bind(this);
}
editorDidMount(editor: any, monaco: any) {
console.log('editorDidMount instance:', editor);
console.log('monaco global instance:', monaco);
editor.focus();
// Example: add a new command (Ctrl+Enter)
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
alert('Ctrl+Enter pressed!');
});
}
onChange(newValue: string, event: any) {
console.log('Editor content changed:', newValue);
this.setState({ code: newValue });
}
render() {
const { code } = this.state;
const options = {
selectOnLineNumbers: true,
automaticLayout: true, // Essential for responsive editors
scrollBeyondLastLine: false,
minimap: {
enabled: true,
},
fontSize: 14,
};
return (
<div style={{ height: 'calc(100vh - 40px)', width: '100%', padding: '20px' }}>
<h2>Interactive Code Editor (TypeScript)</h2>
<MonacoEditor
width="100%"
height="100%"
language="typescript"
theme="vs-dark"
value={code}
options={options}
onChange={this.onChange}
editorDidMount={this.editorDidMount}
/>
</div>
);
}
}
const container = document.getElementById('root');
if (container) {
const root = createRoot(container);
root.render(<App />);
} else {
console.error("Failed to find the root element to render the app.");
}
Debug
Known issues
breakingVersion 0.9.0 introduced breaking changes related to the underlying Monaco Editor upgrade and the `theme` option. Users upgrading from versions prior to 0.9.0 may need to adjust their theme configurations.fixReview your `theme` prop configuration and ensure compatibility with Monaco Editor v0.9+ options. Consult the Monaco Editor documentation for updated theme names and structures.
affects: <0.9.0
gotchaIntegrating `react-monaco-editor` with Webpack requires the `monaco-editor-webpack-plugin` (a separate package) and often specific CSS loader configurations to handle Monaco Editor's internal CSS imports, especially when using CSS Modules in your project. Incorrect setup leads to missing styles, worker loading failures, or build errors.fixInstall `monaco-editor-webpack-plugin` and add it to your `webpack.config.js`. Implement separate CSS loader rules for your application's CSS and `node_modules/monaco-editor` to avoid conflicts (e.g., disable CSS Modules for Monaco's CSS).
affects: >=0.1.0
gotcha`react-monaco-editor` lists `monaco-editor` as a peer dependency. This means you must explicitly install `monaco-editor` in your project. Mismatching versions between `react-monaco-editor` and `monaco-editor` can lead to runtime issues or unexpected behavior due to API incompatibilities.fixEnsure `monaco-editor` is installed: `npm install monaco-editor` or `yarn add monaco-editor`. Always check the peer dependency range specified in `react-monaco-editor`'s `package.json` to install a compatible version.
affects: >=0.1.0
breakingThe library has peer dependencies on `React >=16.8.0 <20.0.0` and `react-dom >=16.8.0 <20.0.0`. Attempting to use `react-monaco-editor` with React v20 or newer will result in compatibility issues or runtime errors, particularly related to hooks or deprecated lifecycle methods.fixDowngrade your React and React DOM versions to be within the `^16.8.0 <20.0.0` range. Monitor the `react-monaco-editor` repository for official support for React v20+.
affects: >=0.1.0 (with React v20+)
gotchaThe `overrideServices` prop allows advanced customization of Monaco's internal services. However, this relies on Monaco's internal implementations, which are not part of its public API and `may change over time` without notice, potentially causing unexpected behavior in future Monaco Editor updates.fixUse `overrideServices` with caution and thoroughly test your implementation against new `monaco-editor` versions. Consult the Monaco Editor GitHub issues for discussions on specific service overrides.
affects: >=0.1.0
Errors
Common errors & fixes
Error: Cannot find module 'monaco-editor'
The `monaco-editor` package, a peer dependency, is not installed or not resolvable by your build system.
fixInstall `monaco-editor` explicitly: `npm install monaco-editor` or `yarn add monaco-editor`. If using an older version of `react-monaco-editor` (e.g., <0.10.0), this was a known issue, fixed by upgrading. [cite: `0.10.0` release notes]
Module not found: Error: Can't resolve 'monaco-editor-webpack-plugin'
The `monaco-editor-webpack-plugin` is required for Webpack-based projects but has not been installed or correctly configured.
fixInstall the plugin: `npm install monaco-editor-webpack-plugin --save-dev` or `yarn add monaco-editor-webpack-plugin --dev`. Then, add it to your `webpack.config.js` plugins array.
ModuleParseError: Module was not found: 'monaco-editor/esm/vs/editor/editor.main.css'
Your Webpack configuration is not correctly handling CSS imports from the `monaco-editor` package, often due to conflicts with CSS Modules or incorrect loader setup.
fixConfigure separate CSS loader rules in `webpack.config.js`. Apply `style-loader` and `css-loader` without `modules: true` specifically for files within `node_modules/monaco-editor`, while maintaining CSS Modules for your application's own CSS.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
This error often indicates that multiple instances of React are loaded in your application, which can happen with incompatible peer dependencies or misconfigured bundlers.
fixVerify that you only have one version of React installed (`npm ls react` or `yarn why react`). Ensure `react` and `react-dom` peer dependencies of `react-monaco-editor` are satisfied by a single, compatible version in your project. This might involve resolving dependency tree conflicts or adjusting bundler configurations.
Audit
Dependencies
monaco-editorrequiredThe core editor library providing the actual editing functionality. Required at runtime.
reactrequiredreact-monaco-editor is a React component and requires React to function.
react-domrequiredRequired for rendering React components into the DOM.