Fix: Monaco Editor Not Working — Editor Not Loading, TypeScript Errors, or Web Workers Failing

The Problem

The editor mounts but shows a blank area:

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

function CodeEditor() {
  return <Editor height="400px" language="typescript" value="const x = 1;" />;
  // Empty white area — no editor visible
}

Or web workers fail to load:

Error: Unexpected usage — or —
Could not create web worker(s). Falling back to loading web worker code in main thread.

Or TypeScript features (autocomplete, type checking) don’t work:

IntelliSense shows no suggestions for imported types

Why This Happens

Monaco Editor is the editor that powers VS Code. It’s powerful but complex to set up in web applications:

• Monaco loads web workers for language features — TypeScript, CSS, HTML, and JSON each have dedicated web workers for parsing, validation, and IntelliSense. If workers can’t load (wrong URL, CSP blocking, bundler misconfiguration), the editor falls back to the main thread or features break.
• The editor needs explicit dimensions — Monaco fills its container. If the container has zero height, the editor is invisible. You must set height on the Editor component or give the parent a defined height.
• TypeScript configuration is separate — Monaco has its own TypeScript compiler that runs in the browser. It doesn’t use your project’s tsconfig.json. You must configure compiler options and type definitions through the Monaco API.
• Monaco is large (~5MB) — it includes full language support for many languages. For production, consider loading it from a CDN or code-splitting.

Fix 1: React Setup with @monaco-editor/react

npm install @monaco-editor/react

'use client';

import Editor from '@monaco-editor/react';
import { useState } from 'react';

function CodeEditor() {
  const [code, setCode] = useState('const greeting: string = "Hello, World!";\nconsole.log(greeting);');

  return (
    <div style={{ border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden' }}>
      <Editor
        height="400px"              // Required — explicit height
        language="typescript"
        theme="vs-dark"             // 'vs' | 'vs-dark' | 'hc-black'
        value={code}
        onChange={(value) => setCode(value || '')}
        options={{
          minimap: { enabled: false },
          fontSize: 14,
          lineNumbers: 'on',
          scrollBeyondLastLine: false,
          wordWrap: 'on',
          automaticLayout: true,     // Auto-resize when container changes
          tabSize: 2,
          formatOnPaste: true,
          formatOnType: true,
        }}
        loading={<div style={{ padding: '20px' }}>Loading editor...</div>}
      />
    </div>
  );
}

Fix 2: Access Monaco Instance for Advanced Features

'use client';

import Editor, { useMonaco, OnMount } from '@monaco-editor/react';
import { useEffect, useRef } from 'react';
import type * as Monaco from 'monaco-editor';

function AdvancedEditor() {
  const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
  const monaco = useMonaco();

  // Configure TypeScript compiler options
  useEffect(() => {
    if (!monaco) return;

    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.ESNext,
      module: monaco.languages.typescript.ModuleKind.ESNext,
      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
      jsx: monaco.languages.typescript.JsxEmit.React,
      strict: true,
      esModuleInterop: true,
      allowJs: true,
      noEmit: true,
    });

    // Add type definitions for IntelliSense
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
      `declare module 'my-lib' {
        export function greet(name: string): string;
        export interface Config {
          theme: 'light' | 'dark';
          lang: string;
        }
      }`,
      'file:///node_modules/my-lib/index.d.ts',
    );

    // Disable built-in validation if you handle it yourself
    // monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
    //   noSemanticValidation: true,
    //   noSyntaxValidation: true,
    // });
  }, [monaco]);

  const handleEditorMount: OnMount = (editor, monaco) => {
    editorRef.current = editor;

    // Focus the editor
    editor.focus();

    // Add custom keyboard shortcut
    editor.addCommand(
      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
      () => {
        const code = editor.getValue();
        console.log('Save:', code);
        // Handle save
      },
    );

    // Add action to context menu
    editor.addAction({
      id: 'format-code',
      label: 'Format Code',
      keybindings: [monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KeyF],
      run: (ed) => {
        ed.getAction('editor.action.formatDocument')?.run();
      },
    });
  };

  // Get/set value programmatically
  function insertText(text: string) {
    const editor = editorRef.current;
    if (!editor) return;

    const position = editor.getPosition();
    if (position) {
      editor.executeEdits('', [{
        range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
        text,
      }]);
    }
  }

  return (
    <div>
      <button onClick={() => insertText('// TODO: ')}>Insert TODO</button>
      <Editor
        height="500px"
        language="typescript"
        theme="vs-dark"
        onMount={handleEditorMount}
        options={{ automaticLayout: true }}
      />
    </div>
  );
}

Fix 3: Custom Themes

'use client';

import { useMonaco } from '@monaco-editor/react';
import { useEffect } from 'react';

function useCustomTheme() {
  const monaco = useMonaco();

  useEffect(() => {
    if (!monaco) return;

    // Define a custom theme
    monaco.editor.defineTheme('my-dark-theme', {
      base: 'vs-dark',
      inherit: true,
      rules: [
        { token: 'comment', foreground: '6A9955', fontStyle: 'italic' },
        { token: 'keyword', foreground: 'C586C0' },
        { token: 'string', foreground: 'CE9178' },
        { token: 'number', foreground: 'B5CEA8' },
        { token: 'type', foreground: '4EC9B0' },
        { token: 'function', foreground: 'DCDCAA' },
        { token: 'variable', foreground: '9CDCFE' },
      ],
      colors: {
        'editor.background': '#1a1a2e',
        'editor.foreground': '#e0e0e0',
        'editor.lineHighlightBackground': '#2a2a4e',
        'editor.selectionBackground': '#3a3a6e',
        'editorCursor.foreground': '#60a5fa',
        'editorLineNumber.foreground': '#555580',
        'editorLineNumber.activeForeground': '#8888aa',
      },
    });
  }, [monaco]);
}

// Usage
function ThemedEditor() {
  useCustomTheme();

  return (
    <Editor
      height="400px"
      language="typescript"
      theme="my-dark-theme"
      value="const x: number = 42;"
    />
  );
}

Fix 4: Multi-File Editor with Tab Support

'use client';

import Editor from '@monaco-editor/react';
import { useState } from 'react';

interface EditorFile {
  name: string;
  language: string;
  value: string;
}

function MultiFileEditor() {
  const [files, setFiles] = useState<EditorFile[]>([
    { name: 'index.tsx', language: 'typescript', value: 'export default function App() {\n  return <div>Hello</div>;\n}' },
    { name: 'styles.css', language: 'css', value: '.container {\n  padding: 1rem;\n}' },
    { name: 'config.json', language: 'json', value: '{\n  "name": "my-app"\n}' },
  ]);
  const [activeFile, setActiveFile] = useState(0);

  function updateFile(value: string | undefined) {
    setFiles(files.map((f, i) =>
      i === activeFile ? { ...f, value: value || '' } : f
    ));
  }

  return (
    <div>
      {/* Tabs */}
      <div style={{ display: 'flex', background: '#1e1e1e', borderBottom: '1px solid #333' }}>
        {files.map((file, i) => (
          <button
            key={file.name}
            onClick={() => setActiveFile(i)}
            style={{
              padding: '8px 16px',
              background: i === activeFile ? '#2d2d2d' : 'transparent',
              color: i === activeFile ? '#fff' : '#888',
              border: 'none',
              borderBottom: i === activeFile ? '2px solid #007acc' : 'none',
              cursor: 'pointer',
              fontSize: '13px',
            }}
          >
            {file.name}
          </button>
        ))}
      </div>

      {/* Editor */}
      <Editor
        height="500px"
        language={files[activeFile].language}
        theme="vs-dark"
        value={files[activeFile].value}
        onChange={updateFile}
        path={files[activeFile].name}  // Unique path for each file's model
        options={{ automaticLayout: true }}
      />
    </div>
  );
}

Fix 5: Diff Editor

'use client';

import { DiffEditor } from '@monaco-editor/react';

function CodeDiff() {
  const original = `function greet(name) {
  console.log("Hello, " + name);
  return name;
}`;

  const modified = `function greet(name: string): string {
  console.log(\`Hello, \${name}\`);
  return \`Hello, \${name}!\`;
}`;

  return (
    <DiffEditor
      height="400px"
      language="typescript"
      theme="vs-dark"
      original={original}
      modified={modified}
      options={{
        readOnly: true,
        renderSideBySide: true,  // false for inline diff
        originalEditable: false,
      }}
    />
  );
}

Fix 6: Next.js Configuration

// next.config.mjs — configure webpack for Monaco workers
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Monaco editor workers
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        path: false,
      };
    }
    return config;
  },
};

export default nextConfig;

// Dynamic import — load editor only when needed
import dynamic from 'next/dynamic';

const CodeEditor = dynamic(
  () => import('@/components/CodeEditor'),
  {
    ssr: false,  // Monaco doesn't work with SSR
    loading: () => <div style={{ height: 400, background: '#1e1e1e' }}>Loading editor...</div>,
  },
);

export default function EditorPage() {
  return <CodeEditor />;
}

Still Not Working?

Blank/white area instead of editor — the container has no height. Set height="400px" on the Editor component or give the parent a CSS height. Monaco fills its container but won’t create its own height.

Web workers fail with CORS or CSP errors — Monaco loads workers from the same origin. If using a CDN, the @monaco-editor/react loader handles this automatically. For custom setups, configure MonacoEnvironment.getWorkerUrl to point to your worker files.

TypeScript IntelliSense doesn’t show — Monaco’s TypeScript language service runs separately from your project. Add type definitions with addExtraLib(). For React types, add @types/react definitions. For your own libraries, pass the .d.ts content.

Editor is slow with large files — Monaco handles large files well, but files over 10MB can cause UI lag. Disable minimap, line numbers, and syntax highlighting for very large files. Set largeFileOptimizations: true in editor options.

For related code editor issues, see Fix: Tiptap Not Working and Fix: Shiki Not Working.