CODEWITHSUNDEEP
ajaxmonaco-editor
404 not found
404 not found

Reputation: 104

How to load scripts via ajax when monaco editor is used

When I use monaco editor in a web app, the loader causes previously defined ajax script loads to no longer load. See example here

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
<script>
  $.ajax({
    url: 'https://unpkg.com/[email protected]/dist/vue.js',
    dataType: 'script'
  }).done(function() {
    console.log('Vue', typeof Vue)
  })      
</script>

In this example, Vue is undefined, removing the loader.js tag, Vue is no longer undefined and it logs dev mode message to the console

I have tried loading as text and calling eval, eval.call with context, creating a script tag and appending, vanilla ajax call without jquery, using require(src) and the loader seems to be aggressively trapping all script loads.

I have an application that has been using the ace editor and am trying to switch out to monaco. The application is interactive, user writes queries and script and displays results. From the results, the user could make a selection which could call another query to update results.

Upvotes: 0

Views: 605

Answers (1)

AndersMad
AndersMad

Reputation: 338

The monaco loader.js is a small AMD loader - so use this:

require(['https://unpkg.com/[email protected]/dist/vue.js'], function(theVue) {
  console.log('the Vue is ' + theVue);
})

See the first part of the vue source file - it checks for AMD and inits another way if present.

Upvotes: 1

Related Questions