Monaco-editor: [json] support loading schemas from URI or file

Created on 14 Feb 2017 · 9Comments · Source: microsoft/monaco-editor

I'm getting this error when trying to load a JSON schema. There is no additional information in the console. My app is hardly more complex than the boilerplate setup. Its just an index.html file and /node_modules/monaco-editor. I'm serving it via a simple web server. Below is the index.html

Happy to help debug this further if someone can point me in the right direction.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

<script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' }});
    require(['vs/editor/editor.main'], function() {
        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
            schemas: [{
                fileMatch: ['*.json'],
                uri: "wizardSchema.json"
            }],
            validate: true,
            allowComments: true
        });

        var jsonCode = [
            '{',
            "}"
        ].join('\n');

        var model = monaco.editor.createModel(jsonCode, 'json', 'wizardSchema.json');
        var editor = monaco.editor.create(document.getElementById('container'), {
            model: model
        });
    });
</script>
</body>
</html>

monaco-editor npm version: 0.8.1
Browser: Chrome
OS: Windows 10

feature-request monaco-json

Source

vcipriani

👍2

Most helpful comment

@aapoalas - I was able to hack my way around this by fetching the JSON on my own and then providing the POJO in the config. See below.

fetch('./mySchema.json')
        .then(res =>res.json())
        .then((schema) => {
            var config = {
                schemas: [{
                    fileMatch: ['*.json'],
                    schema
                }],
                validate: true,
                allowComments: true
            }
            require(['vs/editor/editor.main'], function() {
                monaco.languages.json.jsonDefaults.setDiagnosticsOptions(config);
  .......

vcipriani on 13 Apr 2017

👍3

All 9 comments

I'm having the same issue. Would be lovely to make schema validation possible.

aapoalas on 7 Apr 2017

@aapoalas - I was able to hack my way around this by fetching the JSON on my own and then providing the POJO in the config. See below.

fetch('./mySchema.json')
        .then(res =>res.json())
        .then((schema) => {
            var config = {
                schemas: [{
                    fileMatch: ['*.json'],
                    schema
                }],
                validate: true,
                allowComments: true
            }
            require(['vs/editor/editor.main'], function() {
                monaco.languages.json.jsonDefaults.setDiagnosticsOptions(config);
  .......

vcipriani on 13 Apr 2017

👍3

I was able to make it working by editing the minimized jsonWorker.js where I added the following:

this._languageService=i.getLanguageService({promiseConstructor:a,

schemaRequestService: (url) => {
    return fetch(url).then(resp => resp.text())
},
resolveRelativePath: (relativePath, resource) => {
    return relativePath
}

})

oldrich-s on 22 Feb 2018

👍2

@aeschli is the problem with Monaco that the schemaRequestService interface @czb called out isn't exposed in the public API?

michael-hawker on 16 Aug 2018

@michael-hawker Yes, the schemaRequestService currently only exists on the json worker. What's missing is that we have the API also on the main thread and the code that forwards the requests from the worker to the Main thread.

aeschli on 17 Aug 2018

I'm running into this issue. I have a web application that relies on a set of JSON schema files for code completion and validation. When using the Monaco-editor, it seems like I can actually get the code completion to work using a relative path to the json schema files. But the second I turn on validation, it fails.

If I instead reference the file via http address, it loads it but fails due to relative "$ref" paths in the schema. If I remove those or update them to point to the http address, validation and code completion work.

@aeschli - Is there a reason relative file paths work for code completion but not validation? Can you point me in the direction of where I could fix that locally? Short term, my fix may be to write a script to replace all of the refs with the http addresses.

RVEIII on 28 May 2020

@RVEIII That sounds strange, I'm nor aware of any difference regarding resolving references for code completion or for validation.
To investigate you would have to give more more information. How did you configure the Monaco editor, how does the schema look like. Can you provide a HTML test page like above?

aeschli on 28 May 2020

Hey @aeschli, I got the schema working. I loaded the schema files into memory and referenced them that way. Then I spun through them and changed all of the relative $ref properties to point to absolute paths that matched the URIs I set in the json diagnostic options.

RVEIII on 29 May 2020

I too would like to set schemaRequestService.
I load json schemas on-demand from an application bundle, rather than from fetch(), so I need a way to override schemaRequestService.
(Also, contextService.resolveRelativePath seems to be missing)
monaco 0.20.0