Ace editor “define is not defined”

StackOverflow https://stackoverflow.com/questions/10883190

  •  12-06-2021
  •  | 
  •  

Question

I'm trying to add the ace editor to my app. I downloaded it from github, dropped the "ace/lib/ace" directory into my app's directory, included:

<script src="ace/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>"

in my body tag and:

editor = ace.edit "editor"

in my script tag. I've tried to load the page in Chrome and Firefox and I get "define is not defined" in ace.js:46. The line in ace.js is:

define(function(require, exports, module) {

Does anyone know why ace is expecting the define() function to exist and why it's not finding it? Here's my source:

<html>
  <body>
    <div id="editor">some text</div>
    <script src="ace/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
      var editor = ace.edit("editor");
    </script>
  </body>
</html>
Was it helpful?

Solution

If you already have the source, then it is pretty easy to do still. Just go in the directory where you copied all the ace source.

Then, do:

npm install
node Makefile.dryice.js

See the wiki for additional details https://github.com/ajaxorg/ace/wiki/Building-ace

OTHER TIPS

You are getting this error because the RequireJS JavaScript library has not been included in your page.

To fix this either use an ace build or include RequireJS in your page.

If you choose to include RequireJS your html fragment will look something like this:

<!-- Editor will go here -->
<div id="editor"></div>

<!-- Load RequireJS -->
<script src="lib/requirejs/require.js"></script>

<!-- Initialize ace -->
<script>

    // Tell RequireJS where ace is located
    require.config({
        paths: {
            'ace': 'lib/ace'
        }
    });

    // Load the ace module
    require(['ace/ace'], function(ace) {
        // Set up the editor
        var editor = ace.edit('editor');
        editor.setTheme('ace/theme/monokai');
        editor.getSession().setMode('ace/mode/javascript');
        // etc...
    });
</script>

I hacked it by putting window.define = ace.define; in my DOMload handler.

In React, if at all you are importing anything from ace-builds, your import order matters.

It should be like this

import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-json';

Not like this

import 'ace-builds/src-noconflict/mode-json';
import AceEditor from 'react-ace';

Alternatively you can use a cdn

And replace 

<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

With something like

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top