TS Compilation errors export 'IFileService' (imported as 'IFileService') was not found

[BusinessDuck]

I am following recommendations about editor + LC usage and cannot compile project.

1. Imports styles on my project looks like this (only 2 kinds), they used only as typescript typings import * as Monaco from 'monaco-editor/esm/vs/editor/editor.api'; import { editor } from 'monaco-editor/esm/vs/editor/editor.api';

2. Main editor package is importing asyncronious via bootstrap function like this

/** Bootrapping only once time */
let monacoInstanceRequest: Promise<MonacoInstance>;

export async function bootstrapMonacoPackage(): Promise<MonacoInstance> {
    if (!monacoInstanceRequest) {
        monacoInstanceRequest = new Promise(async (resolve: (monaco: MonacoInstance) => void) => {
            const localePackage = await getLocalePackage(window.language);

            if (localePackage) {
                setLocaleData(localePackage);
            }

            const monaco = await import(/* webpackChunkName: "monaco.editor" */ 'monaco-editor/esm/vs/editor/editor.api.js');

            configure(monaco);
            resolve(monaco);
        });
    }

    return monacoInstanceRequest;
}

3. Versions

   "monaco-editor": "0.41.0"
   "monaco-languageclient": "6.4.0"
   "vscode-languageclient": "~8.1.0"
   "vscode": "npm:@codingame/monaco-vscode-api@~1.81.1"
   "typescript": "5.0.4"

Compilation errors:

And a lot of other typings error (1000+)

I am using webpack + typescript. No aliases inside of webpack for the vscode-api

[CGNonofr]

Did you add "postinstall": "monaco-treemending" in your package.json scripts?

[BusinessDuck]

it isn't working on hooks automatically?

[CGNonofr]

Nop, AFAIK there is no way for a dependency to modify another dependency

[BusinessDuck]

i've added this hook, ty, but didn't help, oh, yes some errors is gone.

Downloading registry.npmjs.org/monaco-editor/0.41.0: 16.6 MB/16.6 MB, done
. postinstall$ monaco-treemending
│ Monaco-editor has already been tree-mended, ignoring
└─ Done in 283ms
Done in 9.2s

I have 13 Errors instead of 1k+

Error: Can't resolve 'vscode-textmate' 
Can't resolve 'vscode-oniguruma' 
Can't resolve 'xterm-addon-unicode11'
Can't resolve 'xterm'
...etc

[CGNonofr]

Those are peer-dependencies or monaco-vscode-api, I'm not sure why they weren't installed automatically

[CGNonofr]

@kaisalmen that's an issue of importing dynamically everything: it fails if a dependency of a non-used module doesn't exist

[msujew]

@BusinessDuck You're probably using yarn or pnpm, which doesn't automatically install peerDependencies. You'll need to install those manually.

[kaisalmen]

yes, it seems to be a peerDependency issue. We had the same problem with yarn a couple of days ago: https://github.com/TypeFox/monaco-languageclient/issues/518

[BusinessDuck]

Thank you, that helps.

I am sorry by, Your're using peer deps wrong, look like this.

Let me clarify

dependencies are the packages your project depends on.

devDependencies are the packages that are needed during the development phase. Say a testing framework like Jest or other utilities like Babel or ESLint.

peerDependencies are different. They are not automatically installed. When a dependency is listed in a package as a peerDependency, it is not automatically installed. Instead, the code that includes the package must include it as its dependency.

[CGNonofr]

peerDependency is the closest we have to optional dependencies, what is the alternative?

[BusinessDuck]

Is it regarding with you internal environment?

[BusinessDuck]

It is not clear for me, why u call this "optional" but some typings is used from this dependencies in build phase

[CGNonofr]

from monaco-vscode-api point of view, it's optional (it's not used if you don't import some library exports)

but monaco-languageclient imports all monaco-vscode-api exported modules, so everything become mandatory at build time

[kaisalmen]

@CGNonofr and @BusinessDuck We may use peerDependency wrong then or yarn 1 is just too old (depends on your point of view 🙂 ). A peerDependency defines a requirement for a "versions range" (that may be specific to a single version) that should be met. It was invented for plugins (see link below), but can be used to flag dependency version problems. With regular dependencies npm decides for you which dependency wins if you have different versions of the same dependency in your dependency hierarchy (does anyone have details on that?).

If a peerDependency is not met at all, npm install it by default (also see link). So, everyone using npm 7+ won't face a problem. Tools do the same thing, but don't do the same thing. 😉 There is this field peerDependenciesMetain the package.json (used in the client) that allows to specifies optional. Question again is: Does your package manager respect that or just doesn't know. There is a reason why we use the engines field in the client as well:

"peerDependenciesMeta": {
  "monaco-editor": {
    "optional": false
  },
  "vscode": {
    "optional": false
  }
}

So, it is not necessarily about being optional, e.g. if I remove the monaco-editor as peerDependency from monaco-vscode-api everything falls apart.

The initial post is fairly old, but it was updated with newer information (the information is still valid, I think): https://nodejs.org/es/blog/npm/peer-dependencies

Does this help or introduce even more confusion?

[BusinessDuck]

Listing of line 153: vscode/dist/vscode/vs/workbench/services/editor/common/editorService.d.ts

  /**
     * All text editor widgets that are currently visible across all editor groups. A text editor
     * widget is either a text or a diff editor.
     */
    readonly visibleTextEditorControls: readonly (IEditor | IDiffEditor)[];

Listing of line 31: @codingame/monaco-vscode-api/dist/service-override/editor.d.ts

visibleTextEditorControls: Array<ICodeEditor | IDiffEditor>;

Result mistypings error:

Property 'visibleTextEditorControls' in type 'SimpleEditorService' is not assignable to the same property in base type 'IEditorService'.
  Type '(ICodeEditor | IDiffEditor)[]' is not assignable to type 'readonly (IEditor | IDiffEditor)[]'.
    Type 'ICodeEditor | IDiffEditor' is not assignable to type 'IEditor | IDiffEditor'.
      Type 'ICodeEditor' is not assignable to type 'IEditor | IDiffEditor'.
        Type 'ICodeEditor' is missing the following properties from type 'IDiffEditor': getOriginalEditor, getModifiedEditor, onVisible, onHide, and 2 more.ts(2416)

Is it correct here? https://github.com/CodinGame/monaco-vscode-api/blob/main/src/service-override/editor.ts#L66

[BusinessDuck]

Also runtime theme service problem.

Call monaco.editor.defineTheme() didn't work. All services are configured before that call, but problem with standaloneThemeService

standaloneEditor.js:349 Uncaught (in promise) TypeError: standaloneThemeService.defineTheme is not a function
    at Object.defineTheme (standaloneEditor.js:349:1)
    at configure (configure.ts:35:1)
    at async eval (bootstrap.ts:14:1)

How it works now? Please add examples with theme definitions

[BusinessDuck]

inmemory:// directly URI protocol was removed? Which are you using? cache?

Please add an examples with valid vscode ptotocol standard uri, its like. I am used inmemory protocol as scheme, but after update to it itsnt works anymore.

${SCHEME}://${AUTHORITY}/${file}${ext}

[kaisalmen]

@BusinessDuck would you mind sharing your code or some of it? Thank you.

[BusinessDuck]

import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api';

type MonacoInstance = typeof Monaco;
const monaco = await import(/* webpackChunkName: "monaco.editor" */ 'monaco-editor/esm/vs/editor/editor.api.js');

await configure(monaco);

async function configure(monaco: MonacoInstance): Promise<void> {
    // install Monaco language client services
    await initServices({
        configureEditorOrViewsServiceConfig: {},
        enableThemeService: true,
        enableTextmateService: true,
        enableModelService: true,
        enableKeybindingsService: true,
        enableLanguagesService: true,
        enableOutputService: true,
        enableAccessibilityService: true,
        debugLogging: false,
    });

    Object.values(MyLanguage).forEach((languageId: MyLanguage) => {
        const monarchLanguage = MONARCH_RULES[languageId] as languages.IMonarchLanguage;

        monaco.languages.register({
            id: languageId,
        });
        monaco.languages.setMonarchTokensProvider(languageId, monarchLanguage);
        monaco.languages.setLanguageConfiguration(languageId, config);
    });

    // Custom theme
    // monaco.editor.defineTheme(MyTheme.Light, MyThemeLight);
    // monaco.editor.defineTheme(MyTheme.Dark, MyThemeDark);

    const setTheme = (value: string) => {
        const theme = value === StdTheme.Dark ? MyTheme.Dark : MyTheme.Light;
        monaco.editor.setTheme(theme);
    };

    setTheme(watchedTheme.value());
    watchedTheme.subscribe(setTheme);
}

[kaisalmen]

@BusinessDuck Enabling textmate disables monarch support in monaco-editor. Try to remove theme and textmate services. (@CGNonofr correct me if I am wrong, but that did not change, right?).

We are in the process of improving documentation. Here and in monaco-vscode-api

[BusinessDuck]

Also model (relates to uri problem https://github.com/TypeFox/monaco-languageclient/issues/524#issuecomment-1683702931)

const uri = Uri.parse('inmemory://authority.domain.com/file.ext');
const modelRef = await createModelReference(uri, scriptSource);

[BusinessDuck]

Enabling textmate disables monarch support in monaco-editor

is that mean i can use textMate syntax highlighter the same as in vscode? oO Instead of monarch :)

[kaisalmen]

is that mean i can use textMate syntax highlighter the same as in vscode? oO Instead of monarch :)

Yes, without any extra packages:, Look: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/main/src/langium/langiumClient.ts

[BusinessDuck]

When i turn off the TextMate service in configure this hapen:

monaco-vscode-api-services.js:140 Uncaught (in promise) Error: "theme" requires "textmate" service. Please add it to the "initServices" config.
    at importAllServices (monaco-vscode-api-services.js:140:1)
    at async initServices (monaco-vscode-api-services.js:13:1)
    at async configure (configure.ts:15:1)
    at async eval (bootstrap.ts:13:1)

await initServices({
        configureEditorOrViewsServiceConfig: {},
        enableThemeService: true,
        enableModelService: true,
        enableKeybindingsService: true,
        enableLanguagesService: true,
        enableOutputService: true,
        enableAccessibilityService: true,
        debugLogging: false,
    });

[kaisalmen]

⬆️ "Try to remove theme and textmate services."

[kaisalmen]

Regarding the uri I have just pushed an update: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/main/src/langium/langiumClient.ts#L65-L80

⬆️ Once the file is registered it can be used as model. The content is loaded from a local source file beforehand, but it can be just a string.

Files support is always available (default service from monaco-vscode-api)

[BusinessDuck]

Thanks you are all for the quick answers. The last one thing separating me to upgrade to latest version is typing error https://github.com/TypeFox/monaco-languageclient/issues/524#issuecomment-1683499367. Each other issues are gone

[kaisalmen]

@BusinessDuck with 6.4.1 just import monaco-editor like this:

import * as monaco from 'monaco-editor';

the need to import it differently has disappeared with monaco-vscode-api@1.81.1 and hopefully your problem just disappears? If not @CGNonofr needs to investigate, I guess

[BusinessDuck]

I cant use static import, i'd like to import editor package async, when it needed.

[CGNonofr]

monaco-vscode-api imports statically monaco-editor, so there's not point for you to import dynamically monaco-editor

What you should do is doing all the monaco stuff in a module, and import that module dynamically

[BusinessDuck]

@CGNonofr , kk, thanks. Please check typings, static import isn't solve my typings problem :(. Try to use "skipLibCheck": false in you typescript config

[CGNonofr]

Right, here's the fix: https://github.com/CodinGame/monaco-vscode-api/pull/166

[CGNonofr]

what is the point of using the inmemory:// scheme? it was never supported by the createModelReference (and there is no point to) but you can still call monaco.editor.createModel with it

@kaisalmen didn't know about peerDependenciesMeta, interesting!

[BusinessDuck]

inmemory, i am using for files, which is storing in memory while editor is working. That mean these files does not have any real representation, only in memory.

[BusinessDuck]

everything is working pretty

[kaisalmen]

@BusinessDuck and @CGNonofr I just released: https://www.npmjs.com/package/monaco-languageclient/v/6.4.2 containing the fix / updated dependency