Search code examples
javascripthtmlrequirejsace-editor

loading Ace causes Uncaught Error: Mismatched anonymous define() module:

I am trying to use ace text editor. Ace library ace.js seems to require a library require.js, and I have html code that initially looks like this (with some elements omitted):

<html><body>
  <script src="path/to/require.js">
  <script src="path/to/ace.js">
<body></html>

At some timing after document load, an ajax call inserts a target <div> to be turned into a text editor, and a <script> node into the dom, resulting in a structure like this:

<html><body>
  <div id="foo">Hello World</div>
  <script>ace.edit('foo');</script>
  <script src="path/to/require.js">
  <script src="path/to/ace.js">
<body></html>

The ajax functions work only after the document is loaded, so it is certain that by the time the part <script>ace.edit('foo');</script> is added to the dom, the files require.js and ace.js have been loaded.

When ajax is done, JavaScript raises this error:

Uncaught Error: Mismatched anonymous define() module: function (require, exports, module) {
"use strict";

require("./lib/fixoldbrowsers");

var dom = require("./lib/dom");
var event = require("./lib/event");

var Editor = require("./editor").Edito...<omitted>...ch

which comes from require.js. I looks like this error is common for require.js, and I can see a description here, which says:

If you manually code a script tag in HTML to load a script with an anonymous define() call, this error can occur.

but I have no idea what that means. I believe ace.js is calling require, but ace.js is not directly coded in a <script> tag, it is in a file, called through <script src="...">.

How can I make this work?

Solution

  • If you use the pre-packaged ace.js, then you do not need require.js, ace will use it's own define. If you include both require.js and ace.js then you need to use the src-noconflict version.

    If you are using require.js, then you should use it to load ace, rather than using the src attribute of a <script> tag (this is what your error description is talking about):

    <script>
  var ace = require("./path/to/ace");
</script>

    Do not include the .js extension on that path.