Can't get @types type definitions to work correctly

[SamVerschueren]

Hi 👋

I'm trying to get typescript definitions working for external libraries, together with peek definition and what not.

So I was playing around with it in the monaco playground, but can't get it to work correctly.

So I pulled down query-string-params from unpkg and try to load them in into Monaco. First of all, when I press the 💡 or Cmd+., it shows the following import path.

Off course I want it to just be query-string-params and that it automatically picks up the typescript definitions in @types/query-string-params. But I can't get it to work. If I manually import from 'query-string-params, it does not complain, but it can't find the typescript definitions either. Do I have to manually add @types/query-string-params/index.d.tsasquery-string-params/index.d.ts` instead?

Also, do note the %40 in the path. That is because monaco.Uri.toString() encodes that. If I replace the import to use @, it does not work either.

So there are a couple of problems I'm experiencing in this demo

• Path in node_modules is relative
• @ is being replaced with %40, although, it shouldn't import from that location in the first place
• Importing the actual library does not work

Thanks in advance 🙏 !

monaco-editor version: 0.25.2
Browser: Chrome
OS: macOS
Playground code that reproduces the issue:

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS
});

Promise.all([
    fetch('https://unpkg.com/query-string-params@1.7.6/package.json').then((res) => res.text()),
    fetch('https://unpkg.com/query-string-params@1.7.6/dist/index.js').then((res) => res.text()),
    fetch('https://unpkg.com/@types/query-string-params@1.7.0/package.json').then((res) => res.text()),
    fetch('https://unpkg.com/@types/query-string-params@1.7.0/index.d.ts').then((res) => res.text()),
]).then(([pkgJson, source, pkgJsonTypings, typings]) => {
    monaco.languages.typescript.typescriptDefaults.addExtraLib(pkgJson, 'ts:/node_modules/query-string-params/package.json');
    monaco.languages.typescript.typescriptDefaults.addExtraLib(source, 'ts:/node_modules/query-string-params/dist/index.js');
    monaco.languages.typescript.typescriptDefaults.addExtraLib(pkgJsonTypings, 'ts:/node_modules/@types/query-string-params/package.json');
    
    monaco.editor.createModel(typings, 'typescript', monaco.Uri.parse('ts:/node_modules/@types/query-string-params/index.d.ts'));
});

var code = [
	'propertyToUrl()',
].join('\n');

monaco.editor.create(document.getElementById('container'), {
	model: monaco.editor.createModel(code, 'typescript', monaco.Uri.parse('ts:/foo.ts'))
});

[SamVerschueren]

I think some parts are related to #2295.

[thoughtpalette]

Still alive?