Monaca Editor 不使用默认 CDN

背景

在 nextjs 开发中使用 @monaco-editor/react 实现编辑器功能
但是它默认使用 cdn 加载 monaco-editor 依赖，这显然不符合生产稳定性的需求

解决方法

官网有介绍到 4.4.x 版本之后版本使用以下方式

import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';

loader.config({ monaco });

遇到的问题

在 nextjs 中虽然使用了 use client 但是运行依然会报错 window 对象不存在，因为在服务端运行依然会默认加载一次此组件

解决方法

将 Editor 封装为单组组件
使用 nextjs 的动态导入，同时禁用 ssr

具体实现

Editor 组件封装

"use client";
import { Editor, loader, type EditorProps } from "@monaco-editor/react";
import * as monaco from "monaco-editor";
loader.config({ monaco: monaco });

/**
 * ！！！必须使用动态导入禁用 ssr 引入组件。
 * Example:
 * import dynamic from "next/dynamic";
 * const Editor = dynamic(() => import("@/components/MEditor"), { ssr: false });
 */

export default function MonacoEditor({ ...props }: EditorProps) {
  return (
    <Editor
      height="100%"
      language="yaml"
      theme="vs-dark"
      options={{
        minimap: { enabled: false },
        fontSize: 13,
        lineHeight: 1.4,
        tabSize: 2,
        insertSpaces: true,
        wordWrap: "on",
        automaticLayout: true,
        scrollBeyondLastLine: false,
        renderWhitespace: "selection",
        folding: true,
        foldingStrategy: "indentation",
        showFoldingControls: "always",
      }}
      {...props}
    />
  );
}

组件使用

import dynamic from "next/dynamic";
const Editor = dynamic(() => import("@/components/MEditor"), { ssr: false });

export default function Home() {
  return <Editor />;
}