Ace: unable to get ace to work with requirejs due to path issues

[xenoterracide]

But, if you want to clone host Ace locally you can use one of the pre-packaged versions. Just copy one of src* subdirectories somewhere into your project, or use RequireJS to load the contents of lib/ace as ace:
var ace = require("lib/ace");

but accoringing to requirejs documents

 //THIS WILL FAIL
 define(['require'], function (require) {
    var namedModule = require('name');
 });

I've tried all manner of getting requirejs to load ace after installing it using bower, and none of it works. Here's the closest thing I've got to working

but requirejs seems to want to fetch all of it's dependencies without the .js appended, resulting in a 404

GET http://127.0.0.1:9000/bower_components/ace/lib/ace/lib/fixoldbrowsers 404 (Not Found) require.js:1881
GET http://127.0.0.1:9000/bower_components/ace/lib/ace/lib/dom 404 (Not Found) require.js:1881
Uncaught Error: Script error for: /bower_components/ace/lib/ace/./lib/fixoldbrowsers

I'm new to requirejs so this is probably something I'm doing wrong, but I can't figure it out from the existing documentation.

[nightwing]

add path configuration to tell requirejs where to look for ace

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

see http://requirejs.org/docs/api.html#config-paths

Leaving this issue open to update ace documentation to be more clear about this

[xenoterracide]

I've tried that, and various combinations of that, it usually ends up with the other files being prefixed by my baseUrl, so looking for them at /scripts/ instead of /bower_components/ace/lib/ace also would that be the path to the ace directory? or ace.js? note: tried both.

et.org/xenoterracide/pastey-frontend/src/c5b3047b78f7374379a852a7af50f59951720c4a/app/scripts/main.js?at=master
https://bitbucket.org/xenoterracide/pastey-frontend/src/c5b3047b78f7374379a852a7af50f59951720c4a/app/scripts/pastey.js?at=master

also tried subsequently modifying the define to use ace and then some various changes in the require.

basically every time I get requirejs to find ace.js, it fails to find the subsequent fixoldbrowsers because it's either looking in /scripts/ or the GET does not have the .js appended to it.

[nightwing]

All paths are relative to base url. After adding config you should load ace with require("ace/ace").

[xenoterracide]

like this? that's resulting in this

GET http://127.0.0.1:9000/bower_components/ace/lib/ace.js 404 (Not Found) require.js:1881
Uncaught Error: Script error for: ace
http://requirejs.org/docs/errors.html#scripterror

[nightwing]

well if ace.js file isn't in /bower_components/ace/lib/ace change ace: "/bower_components/ace/lib/ace" to point to the directory where it is

[xenoterracide]

it is in /bower_components/ace/lib/ace but that's not what this code results in. it's looking for the file there... it's not taking this as being relative to that path. /bower_components/ace/lib/ace/ace.js but this code results in it looking for /bower_components/ace/lib/ace.js (notice a missing ace in the path) because requirejs looks at things in paths to be files without the .js, not directories (at least from what I've understood).

[xenoterracide]

app  % ls -1 bower_components/ace/lib/ace                                    slave-vi
ace.js
anchor.js
anchor_test.js
background_tokenizer.js
background_tokenizer_test.js
commands
config.js
config_test.js
css
document.js
...

[xenoterracide]

fundamentally the problem appears to be that ace.js is not relative to the baseUrl but instead installed by bower... and in the other case for some reason require.js doesn't add the .js extension. outside of not using bower, or not using requirejs` I'm not sure how this could be fixed.

maybe it could be fixed if I made bower install to the same location as the baseUrl, but that still has one problem, the internal structure that bower leaves from ace is ace/lib/ace and what requirejs is looking for is off that...

[xenoterracide]

http://requirejs.org/docs/api.html#packages could potentially solve this problem... I think I'm close but no cigar...

packages :[
    {
        location: '/bower_components/ace/lib/ace',
        main:     'ace',
        name:     'ace-editor', // tried 'ace' here, but was resulting in a lookup to ace/ace/lib/es5-shim etc weird
    },
],

 define(['require', 'angular','ace-editor'], function( require, angular, ace  ) {
    var editor = ace.edit("editor");

is now resulting in GET http://127.0.0.1:9000/scripts/ace/theme/textmate.js 404 (Not Found)

and all of the rest of the things appear to have been appropriately loaded...

[nightwing]

your last attempt at https://bitbucket.org/xenoterracide/pastey-frontend/src/52347655bcc4f531ebf7dea1a7bb2312b0963456/app/scripts/pastey.js?at=master#cl-8
almost works
just need to change

define([
    'require',
    'angular',
    'routes',
    'controllers',
    'ace',
],

to

define([
    'require',
    'angular',
    'routes',
    'controllers',
    'ace/ace',
],

since you need to load ace.js file in ace folder

[hmartin]

I have the same problem with "es5-shim"

[nightwing]

@hmartin what do you mean? do you have a demo showing your problem?

[hmartin]

I have:

                require.config({
                    packages:[
                        {
                            name: 'ace',
                            location: 'vendor/ace/lib/ace'
                        }
                    ]
                });

and

        require([
            'jquery','domReady', 'ace/ace'
        ], function($, domReady, ace) {
            domReady(function () {
                var editor = ace.edit("editor_{{ uniqId(module) }}");
            });
        });

ace.js, lib/fixoldbrowsers.js... are loaded. But i still have a js error:
503 Service Unavailable: http://.../vendor/ace/lib/ace/main/lib/es5-shim.js
And this directory (vendor/ace/lib/ace/main) doesn't exit

Worker Error: Script file not found: http://.../vendor/ace/lib/ace/main/lib/es5-shim.js in worker_client.js l.96

[nightwing]

ace doesn't work as a package, use paths instead

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

[hmartin]

I have already try it:
http://stackoverflow.com/questions/25664843/requirejs-baseurl-and-require-in-ace-js (it's my question)

[nightwing]

in that question you have 'ace' in require, it should be 'ace/ace' see https://github.com/ajaxorg/ace/blob/master/demo/modelist.html#L29-L31

[hmartin]

Actually you've right! Thx for your time!

[bmfreitas]

I've defined the config as suggested:

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

And it is working as expected. To use a CDN instead, I thought it would as easy as changing the path:

require.config({
    paths: {ace: "//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3"}
});

But it causes a TypeError: undefined is not an object (evaluating 'ace.edit'), which is interesting, because the file ace.js was correctly loaded.

Would it by any chance be related to the ace build being served by the CDN?

[nightwing]

Yes the issue is that cdn.js have noconflict version, which only creates global ace variable and doesn't call define.

[bmfreitas]

Perfect, thanks!