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?