Ace modes for XML, JSON work, but not liquid

Question

Setting an ACE editor instance to JSON or XML language mode works great.

But my statement

LiquidMode = ace.require("ace/mode/liquid").Mode,
// fails, ace.require("ace/mode/liquid") returns undefined

Yet the ace/mode/liquid file is defined on the cdn and is returned by it.

Thank you for any ideas or alternatives.

The cdn call and more:

<script    src="https://cdn.jsdelivr.net/g/[email protected](noconflict/ace.js+noconflict/mode-hjson.js+noconflict/mode-liquid.js+noconflict/mode-xml.js+noconflict/theme-chrome.js)">
</script>

// Javascript file
var XMLMode = ace.require("ace/mode/xml").Mode,
    JSONMode = ace.require("ace/mode/json").Mode,
    LiquidMode = ace.require("ace/mode/liquid").Mode; // fails, 
        // ace.require("ace/mode/liquid") returns undefined

...
ace_session.setMode(new JSONMode()); // works great
...
ace_session.setMode(new LiquidMode());

Answer 1

When you load ace.js with multiple file syntax, dynamic loading doesn't work, because ace can't determine the url from which it was loaded.

As a workaround you can use

var url = "https://cdn.jsdelivr.net/ace/1.2.6/noconflict/"
ace.config.set("basePath", url)

see https://github.com/ajaxorg/ace/blob/v1.2.6/lib/ace/config.js#L185

Note that you don't need to pass mode object, setMode("ace/mode/liquid") works too.

<script    src="https://cdn.jsdelivr.net/g/[email protected](noconflict/ace.js+noconflict/mode-json.js+noconflict/mode-liquid.js+noconflict/mode-xml.js+noconflict/theme-chrome.js)">
</script>

<script >
// Javascript file
var XMLMode = ace.require("ace/mode/xml").Mode,
    JSONMode = ace.require("ace/mode/json").Mode,
    LiquidMode = ace.require("ace/mode/liquid").Mode; 
  debugger  
var editor = ace.edit()   
var url = "https://cdn.jsdelivr.net/ace/1.2.6/noconflict/";
ace.config.set("basePath", url)

editor.setValue("use core::rand::RngUtil;\n\nfn main() {\n    \n}", -1)
editor.setOptions({
    autoScrollEditorIntoView: true,
    maxLines: 15,
});
document.body.appendChild(editor.container)
editor.session.setMode("ace/mode/rust");

</script>