enhancement
major
minor
major
minor
minor
#26711
ACE Editor and requirejs define the global variable require
RequireJS is a library that allows JavaScript files or modules to be loaded dynamically. This means it is used to load files not immediately when a web page is opened, but only when they are needed. To make this functionality available to other developers, the variable (which is effectively a function) `require ` is defined and initialized globally, typically on the `window ` object.
The ACE code editor has a customized and more streamlined version for loading JavaScript files or modules compared to the one provided by RequireJS. Unfortunately, the ACE editor exports its `require` functionality in the “normal” version to the same global scope as RequireJS.
Neither the ACE Code Editor nor RequireJS overrides an existing ` require` variable.
For an application that depends on both ACE and RequireJS, the order in which the respective scripts are loaded or executed determines which `require` variant is used. The ACE Code Editor module currently has no dependency on RequireJS, so no specific order is guaranteed.
If the code editor script (ace.js) is loaded before RequireJS (require.js), the user will receive the following error message upon login: {{{#!js Uncaught TypeError: require.config is not a function }}} in the developer console of the browser being used.
Implementation
The developers of the ACE code editor offer a conflict-free version of their editor. Unlike the “normal” version, the conflict-free version uses the “ace” namespace when exporting its functionality for loading files and modules. This means that, instead of, for example, ` window.require `, the ACE Editor’s functionality is then located under `window.ace.require`.
As part of this process, you should update to the latest version of ACE.
Test
In ext-id-c9-ace.config.xml, for example, specify {{{#!xml <file config:position="begin" resource="ace/ace.js" /> }}} to specify that the ACE Editor is loaded “first” (at least before require.js). Start the Graph demo and verify that no errors appear in the developer console after logging in.