Models with "@" in their name do not resolve as dependencies

The following code examples can be copied into https://microsoft.github.io/monaco-editor/playground.html for verification.

I’m trying to specify dependencies manually via monaco.editor.createModel(), which works fine for dependency outside of organizations, but if a package is defined within a organization, i.e. has a name like @org/packagename and thus contains a @-character, it breaks. To me it looks like this is due to Monaco changing the @-character to %40.

The following code (which does not contain @) works fine:

monaco.editor.create(document.getElementById("container"), {
    model: monaco.editor.createModel(
        "import * as t from 'test';\nt.X.toExponential();\nt.Y; // Error", 
        "typescript",
        monaco.Uri.parse("file://root/test.ts")
    )
});

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

monaco.editor.createModel(
    JSON.stringify({
        name: "test", version: "1.0.0",
        typings: "./lib/index.d.ts"
    }), 
    "typescript",
    monaco.Uri.parse("file://root/node_modules/test/package.json")
);

monaco.editor.createModel(
    "export const X = 1;", 
    "typescript",
    monaco.Uri.parse("file://root/node_modules/test/lib/index.d.ts")
);

console.log(
    "Works:",
    monaco.editor.getModel("file://root/node_modules/test/lib/index.d.ts").uri.toString()
);

However, on this code (containing a @) it breaks;

monaco.editor.create(document.getElementById("container"), {
    model: monaco.editor.createModel(
        "import * as t from '@org/test';\nt.X.toExponential();\nt.Y; // Error", 
        "typescript",
        monaco.Uri.parse("file://root/test.ts")
    )
});

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

monaco.editor.createModel(
    JSON.stringify({
        name: "@org/test", version: "1.0.0",
        typings: "./lib/index.d.ts"
    }), 
    "typescript",
    monaco.Uri.parse("file://root/node_modules/@org/test/package.json")
);

monaco.editor.createModel(
    "export const X = 1;", 
    "typescript",
    monaco.Uri.parse("file://root/node_modules/@org/test/lib/index.d.ts")
);

console.log(
    "Does not work, but should:",
    monaco.editor.getModel("file://root/node_modules/@org/test/lib/index.d.ts")?.uri.toString()
);

console.log(
    "Does work, but doesnt help:",
    monaco.editor.getModel("file://root/node_modules/%40org/test/lib/index.d.ts").uri.toString()
);

monaco-editor version: 0.21.2 Browser: Chrome OS: Windows 10

Is this an issue with Monaco or with my approach? Is there a workaround for this problem? Let me know if you need more details.

[bsorrentino]

Hi

I’ve worked trying to understand the problem and finally I found out.

I’ve submitted PR #3057

[dameemshahabaz]

Any update on this? I also have the same issue