使用@monaco-editor/react传入新value报错：找不到inmemory://model文件

问题原因 #

该错误源于Monaco的语言服务Worker尝试访问已被销毁的内存模型（如inmemory://model/2这类URI对应的模型）。当频繁切换编辑器的value或语言时，旧模型可能尚未被Worker完全释放就被新模型替换，Worker后续的诊断请求找不到旧模型便会触发报错。

解决方法 #

1. 为每个编辑器绑定唯一的model URI #

不要依赖Monaco自动生成的内存URI，手动为每个编辑器实例指定唯一标识，确保模型的创建与销毁能被正确追踪：

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

function MyEditor({ value, language }) {
  const modelUriRef = useRef(window.monaco.Uri.parse(`inmemory://my-editor-${Math.random()}.${language}`));

  return (
    <Editor
      value={value}
      language={language}
      uri={modelUriRef.current}
      onChange={(newValue) => { /* 处理变更逻辑 */ }}
    />
  );
}

2. 手动控制模型销毁时机 #

在组件卸载或语言切换时，主动销毁旧模型，避免内存中残留无效模型引用：

import { useEffect, useRef } from 'react';
import Editor from '@monaco-editor/react';

function MyEditor({ value, language }) {
  const prevLanguageRef = useRef(language);
  const modelUriRef = useRef(window.monaco.Uri.parse(`inmemory://my-editor-${Math.random()}.${language}`));

  useEffect(() => {
    if (prevLanguageRef.current !== language) {
      // 销毁旧模型
      const oldModel = window.monaco.editor.getModel(modelUriRef.current);
      if (oldModel) oldModel.dispose();
      // 生成新的唯一URI
      modelUriRef.current = window.monaco.Uri.parse(`inmemory://my-editor-${Math.random()}.${language}`);
      prevLanguageRef.current = language;
    }
  }, [language]);

  return (
    <Editor
      value={value}
      language={language}
      uri={modelUriRef.current}
    />
  );
}

3. 调整Next.js的Webpack配置（可选） #

若上述方法无效，需确保Monaco的Worker文件被正确打包。在next.config.js中添加以下配置：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new MonacoWebpackPlugin({
        languages: ['javascript', 'typescript', 'python', /* 按需添加你的语言 */],
        filename: 'static/[name].worker.js'
      })
    );
    return config;
  }
};

先安装依赖：

npm install monaco-editor-webpack-plugin --save-dev

4. 避免无意义的value重复更新 #

检查组件是否在不必要的场景下重复传入相同value，导致模型频繁重建。可通过useMemo优化value传递：

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

function MyEditor({ value, language }) {
  const memoizedValue = useMemo(() => value, [value]);

  return <Editor value={memoizedValue} language={language} />;
}

关键提示 #

• 多编辑器实例必须保证各自的uri唯一，禁止共享同一URI
• 语言切换时务必处理旧模型销毁，防止Worker持有无效引用

内容的提问来源于stack exchange，提问作者Lance Pollard