I struggle and fail with "Embedding ACE in Your Site" and RequireJS. #1017

Closed
NodeGuy opened this Issue Oct 6, 2012 · 6 comments

Comments

Projects
None yet
4 participants
@NodeGuy

NodeGuy commented Oct 6, 2012

I'm trying to follow the directions to embed ACE in my site using RequireJS as documented in Embedding ACE in Your Site:

  1. Download the contents of lib/ace.
  2. Modify the sample code to remove the non-local script tag, to include RequireJS, and to include var ace = require("lib/ace"); as directed:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
</head>
<body>

<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>

<script src="lib/require.js"></script>
<script>
    var ace = require("lib/ace");
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
</script>
</body>
</html>

I get the following error message in the console of Firefox:

[20:44:34.694] Error: Module name "lib/ace" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded @ file:///Users/david/Desktop/test/lib/require.js:8

I noticed that the suggested use of RequireJS (var ace = require("lib/ace");) doesn't match the documentation for RequireJS, so I tried changing it to follow the RequireJS API:

    require(["lib/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    });

I get the error message:

[20:47:50.348] Error: Load timeout for modules: lib/ace
http://requirejs.org/docs/errors.html#timeout @ file:///Users/david/Desktop/test/lib/require.js:8

Thinking that RequireJS is really wanting a JavaScript file, not a directory, I change it again to this:

    require(["lib/ace/ace.js"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    });

and get this error message:

[20:50:39.677] Error: Load timeout for modules: ace/requirejs/text!lib/ace/css/editor.css_unnormalized2,ace/requirejs/text,ace/requirejs/text!lib/ace/theme/textmate.css_unnormalized3
http://requirejs.org/docs/errors.html#timeout @ file:///Users/david/Desktop/test/lib/require.js:8

At this point I give up. :-(

@nightwing

This comment has been minimized.

Show comment
Hide comment
@nightwing

nightwing Oct 7, 2012

Member

see https://github.com/ajaxorg/ace/blob/master/kitchen-sink.html#L258-266
you need to configure paths first

paths: {
              ace: "lib/ace"
          }
Member

nightwing commented Oct 7, 2012

see https://github.com/ajaxorg/ace/blob/master/kitchen-sink.html#L258-266
you need to configure paths first

paths: {
              ace: "lib/ace"
          }
@NodeGuy

This comment has been minimized.

Show comment
Hide comment
@NodeGuy

NodeGuy Oct 8, 2012

I see, thank you. I was able to get it working but configuring the paths wasn't all I needed to do. Perhaps you could include the following, which was the minimum I needed for it to work, on the Embedding ACE in Your Site page to help others:

<script src="lib/require.js"></script>
<script>
    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: "lib/ace"
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    });
</script>

NodeGuy commented Oct 8, 2012

I see, thank you. I was able to get it working but configuring the paths wasn't all I needed to do. Perhaps you could include the following, which was the minimum I needed for it to work, on the Embedding ACE in Your Site page to help others:

<script src="lib/require.js"></script>
<script>
    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: "lib/ace"
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    });
</script>
@nightwing

This comment has been minimized.

Show comment
Hide comment
@nightwing

nightwing Oct 29, 2012

Member

baseUrl was needed because by default it is the location of require.js

in your case removing require.config call or changing it to

    require.config({ paths: {ace: "../lib/ace"} });

should work

cc @gjtorikian

Member

nightwing commented Oct 29, 2012

baseUrl was needed because by default it is the location of require.js

in your case removing require.config call or changing it to

    require.config({ paths: {ace: "../lib/ace"} });

should work

cc @gjtorikian

@NodeGuy

This comment has been minimized.

Show comment
Hide comment
@NodeGuy

NodeGuy Nov 21, 2012

Thank you.

Using RequireJS with ACE was too slow (perhaps because there are so many modules) so I've switched to using the SCRIPT element instead.

NodeGuy commented Nov 21, 2012

Thank you.

Using RequireJS with ACE was too slow (perhaps because there are so many modules) so I've switched to using the SCRIPT element instead.

@NodeGuy NodeGuy closed this Nov 21, 2012

@silentsnooc

This comment has been minimized.

Show comment
Hide comment
@silentsnooc

silentsnooc Oct 16, 2015

Okay, here is what I got. I tried to change the theme when my page loads. This works:

<script>
    var ace_root = "scripts/lib/bower_components/ace/lib/ace/";

    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: ace_root
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme(ace_root + "theme/tomorrow_night_bright");
        editor.getSession().setMode(ace_root + "mode/assembly_x86");
    });
</script>

but this does not work:

<script>
    var ace_root = "scripts/lib/bower_components/ace/lib/ace";

    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: ace_root
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme(ace_root + "/theme/tomorrow_night_bright");
        editor.getSession().setMode(ace_root + "/mode/assembly_x86");
    });
</script>

The difference is if I put / to ace_root (working) or not (not working). I don't know if that's intended or what the reason is but I thought I mention that here. Get the full HTML document I used here.

Browser: Firefox 41.0.2

Okay, here is what I got. I tried to change the theme when my page loads. This works:

<script>
    var ace_root = "scripts/lib/bower_components/ace/lib/ace/";

    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: ace_root
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme(ace_root + "theme/tomorrow_night_bright");
        editor.getSession().setMode(ace_root + "mode/assembly_x86");
    });
</script>

but this does not work:

<script>
    var ace_root = "scripts/lib/bower_components/ace/lib/ace";

    require.config({
        baseUrl: window.location.protocol + "//" + window.location.host
            + window.location.pathname.split("/").slice(0, -1).join("/"),

        paths: {
            ace: ace_root
        }
    });

    require(["ace/ace"], function (ace) {
        var editor = ace.edit("editor");
        editor.setTheme(ace_root + "/theme/tomorrow_night_bright");
        editor.getSession().setMode(ace_root + "/mode/assembly_x86");
    });
</script>

The difference is if I put / to ace_root (working) or not (not working). I don't know if that's intended or what the reason is but I thought I mention that here. Get the full HTML document I used here.

Browser: Firefox 41.0.2

@evert2410

This comment has been minimized.

Show comment
Hide comment
@evert2410

evert2410 Apr 5, 2016

Hi,

I'm surprised how any of you got this to work ...
I only got it to work with adding a "return exports;" at the end of the define in ace.js.

In the version pulled from github today, April 5th 2016.

What am I missing .. ?
And I guess I shouldn't even apply that fix ?

Kind Regards,
Evert

Hi,

I'm surprised how any of you got this to work ...
I only got it to work with adding a "return exports;" at the end of the define in ace.js.

In the version pulled from github today, April 5th 2016.

What am I missing .. ?
And I guess I shouldn't even apply that fix ?

Kind Regards,
Evert

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment