如何在Monaco Editor中使用addExtraLib引入npm包并解决模块未找到问题？

1. 正确注入类型定义并关联模块路径 #

你当前的问题核心是类型文件未被Monaco识别为对应模块的定义，需要在注入时指定虚拟文件路径，让编辑器将其关联到axios模块：

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

const handleEditorDidMount = async (editor, monacoInstance) => {
  // 拉取axios自带的类型定义文件（v1.x版本已内置类型，无需@types/axios）
  const typeRes = await axios.get('https://unpkg.com/axios@1.5.1/index.d.ts');
  const typeContent = typeRes.data;

  // 关键：指定虚拟路径为node_modules下的axios类型文件，让Monaco识别模块关联
  monacoInstance.languages.typescript.typescriptDefaults.addExtraLib(
    typeContent,
    'file:///node_modules/axios/index.d.ts'
  );

  // 配置TypeScript编译选项，适配模块解析
  monacoInstance.languages.typescript.typescriptDefaults.setCompilerOptions({
    module: monacoInstance.languages.typescript.ModuleKind.ESNext,
    target: monacoInstance.languages.typescript.ScriptTarget.ES2020,
    moduleResolution: monacoInstance.languages.typescript.ModuleResolutionKind.NodeNext,
    allowSyntheticDefaultImports: true,
    esModuleInterop: true,
    skipLibCheck: true
  });
};

2. 手动补全模块映射（若上述步骤无效） #

如果Monaco仍无法识别模块，可手动添加模块声明文件做映射：

// 在注入axios类型文件后追加
monacoInstance.languages.typescript.typescriptDefaults.addExtraLib(
  `declare module 'axios' {
    export * from 'file:///node_modules/axios/index.d.ts';
  }`,
  'file:///axios-module-mapping.d.ts'
);

3. 验证类型文件有效性 #

• 先本地下载axios@1.5.1包，复制node_modules/axios/index.d.ts的完整内容直接注入，排除网络或CDN路径问题
• 确认类型文件中包含export default axios或完整的导出声明

4. 验证测试代码 #

在编辑器中输入以下代码，检查自动补全是否生效：

import axios from 'axios';

axios.get('https://example.com')
  .then(res => {
    // 此处应自动补全res.data、res.status等属性
    console.log(res.data);
  });

内容的提问来源于stack exchange，提问作者Enes Malik Özer