How to use addExtraLib in Monaco Editor with an npm package?

Question

I'm trying to use Monaco Editor with an npm package that provides custom type definitions for a specific library.

I am using '@monaco-editor/react', and this is my onMount function.

const handleEditorDidMount = (editor: monaco.editor.IStandaloneCodeEditor) => {
        editorRef.current = editor;

        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
            target: monaco.languages.typescript.ScriptTarget.ESNext,
            module: monaco.languages.typescript.ModuleKind.CommonJS,
            moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
            allowNonTsExtensions: true,
            noEmit: true,
            noLib: true,
            typeRoots: ['node_modules/@types'],
        });

        const declarationURL = 'https://unpkg.com/[email protected]/index.d.ts';
        axios
            .get('https://unpkg.com/[email protected]/index.d.ts')
            .then((response) => {
                console.log('Fetched type definitions:', response.data);
                // Add the fetched type definitions to Monaco Editor
                monaco.languages.typescript.typescriptDefaults.addExtraLib(response.data, declarationURL);
            })
            .catch((error) => {
                console.error('Failed to fetch type definitions:', error);
            });
    };

But when I want to use axios in Monaco it gives me 'Cannot find module 'axios'. error and autocomplete doesnt work.

How can I use a npm package with autocompletion with monaco ?

Answer 1

Explanation:

You are passing the url of the package (https://unpkg.com/[email protected]/index.d.ts) to the file location here:

...
const declarationURL = 'https://unpkg.com/[email protected]/index.d.ts';
...
monaco.languages.typescript.typescriptDefaults.addExtraLib(response.data, declarationURL);
...

This will create a file in monaco like this:

file:///https://unpkg.com/[email protected]/index.d.ts

Solution

I'm assuming from the limited context that you probably want it to function similar to as if you installed it with a package manager, so you could save it like this instead:

axios
  .get("https://unpkg.com/[email protected]/index.d.ts")
  .then((response) => {
     console.log("Fetched type definitions:", response.data);
     // Add the fetched type definitions to Monaco Editor
     monaco.languages.typescript.typescriptDefaults.addExtraLib(
       response.data,
       "file:///node_modules/axios/index.d.ts"
     );
   })
   .catch((error) => {
     console.error("Failed to fetch type definitions:", error);
   });

You can now access it in monaco by doing this:

import type axios from "node_modules/axios/index.d.ts";

Again, I'm not entirely sure what you want to do with it, but if you want to only get the types this will work.