Accessing monaco in Theia

I created a demo a while back which added various libraries and customised monaco for our use case. However we decided due to Theia being so feature rich we’d use Theia instead. However there are still some things that we’d like to carry over from the monaco demo, however we can’t figure out the best place to add the changes to monaco (various language libraries etc). We want to add extra libraries to Javascript/TypeScript.
How would I access these in Theia?

[original thread by StevieD]

How did you register them before?

in Theia we don’t rely on typescript language services but on language servers or on VS Code typescript extension

with language servers, you should install typings in package.json of your project


They were registered direct in monaco with monaco.languages.typescript.javascriptDefaults.addExtraLib(). Is there any documentation for installing typings in the language server?

Do you have a project with package.json? Usually one can install typing for a library with npm install @types/mylib, sometime libraries are coming with typings already.


Yes we have a typings library - can these be then added to the language server to be picked up a standard library?


The kind of projects we are using for Theia won’t have a package.json or all of the code avilable for the users to edit. The monaco approach of loading the external library worked well in our case. Am hoping we can do something similar with the language server?

I don’t think it is possible with the language server or VS Code extension. At least I could not find anything about it in VS Code docs. Please someone correct me if i’m wrong.

You can also use your approach, so don’t use @theia/typescript, but add a dependency to Monaco typescript language services package. You will need a custom webpack config which copy code of this package to the final app, similarly how it is done for css and html languages by default. Please have a look at generated webpack config for it.

How to customize a webpack config:


Thanks @anton-kosyakov I’ll give it a go.


I’ve added the webpack config, and the typescript folder now gets copied under the lib/vs/language folder but isn’t loaded, would I need to make changes to the @theia/monaco package, as this seems to load the html and css languages?

ah, right we have to load it there as well, let me think how you can do it

It would be hacky :slight_smile: but following could work:

  • your extension should depend on @theia/monaco to make sure that then your frontend module is loaded other monaco services are already loaded

I hope it does the trick. Not sure since there would be two different instances of vsRequire, but they install everything globally as far as I know.

If it does not work, we can think how to allow hooking into loadMonaco for 3rd party extensions.


Doesn’t appear to work, I copied the loading of the monaco loader code into my module and I get a warning of "Duplicate definition of module ‘===anonymous1===’ "