Monaco Instance Undefined When Trying to Change Options

[peterje]

I am using monaco-editor in my Vue web application. The editor loads and runs completely fine. However, I need to change the autocomplete sources for the editor. When doing so, the following code throws :

Uncaught (in promise) TypeError: Cannot read property 'setCompilerOptions' of undefined

And the editors fails to load.

Am I misusing the monaco instance?

import loader from '@monaco-editor/loader';

export default {
  mounted() {
    const wrapper = document.getElementById("editor")
    loader.init().then(monaco => {

      monaco.languages.typescriptDefaults.setCompilerOptions(
          {
            noLib: true,
            allowNonTsExtensions: true,
            target: monaco.languages.typescript.ScriptTarget.ES2015
          }
      );

      monaco.editor.create(wrapper, {
        value: 'const name = "Peter"',
        language: 'typescript',
      });
    });
  },
}

The editor works fine with the following code:

import loader from '@monaco-editor/loader';

export default {
  mounted() {
    const wrapper = document.getElementById("editor")
    loader.init().then(monaco => {
      monaco.editor.create(wrapper, {
        value: 'const name = "Peter"',
        language: 'typescript',
      });
    });
  },
}