How to load separate file on demand?

Question

I am using the Monaco editor as a JSON editor and schema validation. I know how to add custom schema validation in code. Following the official documentation: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-json-defaults

But what I want is load the schema from an external file, so that the code looks like this:

const schema = require('../../../samples/spec-schema.json')

<MonacoEditor height='100%' width='100%'
               language='json'
               theme='vs-dark'
               value={this.state.json}
               onChange={newValue => this.setState(s => Entity(s).set('json', _ => newValue).commit())}
               editorWillMount={monaco => {
                            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
                                validate: true, 
                                schemas: [{
                                    uri: '../../../samples/spec-schema.json',
                                    schema: schema
                                }]
                            })
                        }}
                    />

I am using React with Webpack, I think there needs to be a way to load in the schema with webpack and then pass it the Monaco editor, but I don't know how to do this.

Answer 1

I solved this problem by enabling enableSchemaRequest: true and hosting my JSON schema online in GitHub Gist. Just add the $schema: "https://gist.githubusercontent.com/my-schema.json" to the top of the editor, like you would do in VS Code.

monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
     enableSchemaRequest: true
 })