Adding a custom ace/mode crashes with "define not defined"

[smithwinston]

angular-ui-ace works great, I got ACE embedded in my Angular app. Next problem is I'm trying to load a custom mode. In my $scope.aceLoaded callback, I am able to set the modePath as follows:

ace.config.set("modePath", "customModes");
...
session.setMode('ace/mode/tester');

So far so good, it loads the mode-tester.js mode from customModes. However, mode-test.js promply crashes with:

Uncaught ReferenceError: define is not defined 

At the first line which looks like this (see the Wiki):

define('ace/mode/tester', function(require, exports, module) {

So clearly, things like "define" and "require" aren't getting set up. Not sure if this is a requirejs thing, although it seems as thus far I haven't needed to use requirejs with Angular.

Any ideas?

[douglasduteil]

Hi

If you're using a noconflict version of Ace you can access to the define function with ace.define.

So you might add it like :

// Defines define if define is not defined -_-
window.define = window.define || ace.define;

[smithwinston]

I initially tried that with mode-tester.js file, but it ends up breaking with the same error a few lines further in as it can't locate "Mode".

[douglasduteil]

So I guess that the problem comes form the mode-tester.js file that probably don't expose a Mode. I'm making a demo so we both have a concrete example of the custom mode creation.

[douglasduteil]

Check this out : http://plnkr.co/MuzIWp

[smithwinston]

@douglasduteil Nice example, that works perfectly! I think I need to understand mode creation a bit more.

Thanks!!!

[smithwinston]

Just FYI, turns out the Mode not defined error was because I needed to explicitly load the mode file I was trying to extend in mode-tester.js in my HTML.

[douglasduteil]

Noted :)