raphael breaks if loaded via require-js. #524

Closed
iwyg opened this Issue Feb 21, 2012 · 68 comments

Comments

Projects
None yet

iwyg commented Feb 21, 2012

Raphael also breaks if requires merely existent on the page. If require is not undefined (and in case requirejs is loaded, require is defined), eve won't be added to the global scope.

azat-co commented Feb 27, 2012

Same issue "eve is not defined" Require.js+Backbone.js+Raphael.js

iwyg commented Feb 27, 2012

ah, thanks, didn't see that

bkase commented Mar 14, 2012

Same issue here -- require on Raphael.js throws "eve is not defined"

Yep, same issue here. Is there a fix?

artureg commented Mar 27, 2012

i have "eve is not defined" too

artureg commented Mar 27, 2012

raphael breaks if loaded via dojo.js

The same problem (Require.js+Backbone.js+Raphael.js). It does not support AMD system...
So... what could we do? Load it globally...? pf...

azat-co commented Mar 30, 2012

I just added <script src=...> before other JS files directly into main HTML

file and it worked.

Azat,
http://azat.co

On Wed, Mar 28, 2012 at 7:19 PM, Timophey <
reply@reply.github.com

wrote:

The same problem (Require.js+Backbone.js+Raphael.js). It does not support
AMD system...
So... what could we do? Load it globally...? pf...


Reply to this email directly or view it on GitHub:

#524 (comment)

Ok. But in this case you load it globaly, and it's going out of AMD architecture...(

Solution for amd already exists:
#540

buhl commented Mar 30, 2012

Looking at the source you can see that eve actually supports AMD but Raphael doesn't.
The fix should be to make Raphael AMD complient...(I think)

By the way, I fixed this by adding window.eve = eve in the eve portion (where it was defined). Then I could load the file with Require.

You don't always get responses / support with Raphael, so you may have to fix this yourself.

rvalle commented Apr 2, 2012

same problem...

azat-co commented Apr 17, 2012

Thanks @matthewdl :)

buhl commented Apr 18, 2012

window.eve = eve won't make raphael AMD complient it will just let you load it via requirejs. but loading it via requirejs wont give you raphael as a function argument. it will just register Raphael globally.

Yep, it's not a fix for the way Raphael is coded, just a temporary workaround.

As @ansero mentioned there's a pull request to add AMD support to Raphael. If you try it out, please leave a comment and let me know how it went.

#540

Same problem here, loading alongside require JS rather then being 'required'.

Changing the load order fixed this for me, Raphael first then Require works.

same here ...

+1 for solution

+1

sapegin commented Jun 2, 2012

+1.

anistal commented Jul 1, 2012

+1

+1

This is an example of a possible solution using Require.js+Backbone.js+Raphael.js:
https://github.com/chrisjensenuk/DrawSvg
God bless America and Chrisjensenuk!

iwyg commented Jul 17, 2012

Whatever. Requirejs now provides some sort of module loading shim. So, it should work fine with raphael, though I didn't test it for now.

Thanks @iwyg!

jimklo commented Jul 19, 2012

@JuanchiSan do you have a gist on how to make it work with a shim?

@jimklo
yes, Take a look at https://github.com/JuanchiSan/RaphaelProject/blob/master/app/main.js
It´s a unfinished project that i´m developing. There you can see how I used it with a shim.

@JuanchiSan You shouldn't actually need the shim loader in that case, since you're using a modified version of Raphael that's wrapped in AMD modules.

Here's an example of how to grab the RaphaelJS source and convert it to AMD:

pmcelhaney/raphael@e2cea67

You are rigth, Thanks @pmcelhaney!

hay commented Oct 6, 2012

This problem seems to occur even if you don't load Raphael using Require, but just have Require loaded in a script tag. (Using Firefox 14.0, Raphael 2.1.0 and Require.JS 2.1.0).

pajtai commented Oct 7, 2012

Chris' solution of returning R.ninja from a define that has the individual Raphael parts as dependencies seems really good...
https://github.com/chrisjensenuk/DrawSvg/blob/master/source/scripts/raphael.amd.js

rinatio commented Oct 16, 2012

+1. Still not working with require.js ...

vraa commented Oct 29, 2012

Facing same issue. 👎

+1 Waiting for proper fix.

Note: @JuanchiSan 's solution did not work for me

+1 for officially supporting require.js

+1, but the script tag solution will work for now.

noahrc commented Dec 5, 2012

+1 for official support. Using raphael in a shim didn't work for me, but @pmcelhaney 's pure-amd branch did the trick, thanks!

Using a shim DID work for me. I'd say AMD support is still a pre for any library these days. But it works.

rinatio commented Dec 7, 2012

@ElessarWebb , can you show your shim? I tried that, and got an error with eve...

@mashingan Yes, ofcourse. Although there is little mystery to it.

shim: {
        // raphael shim
        'raphael': {
            exports: 'Raphael'
        }
}

It's very minimal, but it works like a charm. I'm using RequireJS 2.1.2 and the r.js optimizer. Not properly tested without the optimizer.

iwyg commented Dec 8, 2012

as I already mentioned here: issuecomment-7050500

omab commented Dec 11, 2012

I've got into a big fight with this issue, finally the fix came by checking eve.js dependencies and a couple shim rule for it:

shim: {
    'jquery': {
        exports: 'jQuery'
    },
    'eve': {
        deps: ['jquery'],
        exports: 'eve'
    },
    'raphael': {
        exports: 'Raphael'
    }
}

Update: ignore it, this doesn't work.

@chiefy bower install eve-adobe doesn't work because you get an old version (0.2.4) of eve, which doesn't seem to be compatible with Raphael 2.1.0. It is missing eve.off(). eve-adobe on github has no tag for 0.3.4 which Raphael uses.

chiefy commented Feb 21, 2013

@andrehaveman eve-adobe appears to just be a transfer of eve from Dimitri to Adobe. The version numbers don't mean anything afaik. Eve.off is defined. Anyhow, after I wrote my comment above, I had issues. I ended up creating a GruntJS task to concat raphael.core.js, raphael.svg.js, raphael.vml.js and eve.js into one raphael.js and it works.

In case the helps anyone, I did this and it seems to be working (so far):

[1] Cloned and updated submodules per https://github.com/DmitryBaranovskiy/raphael/#readme

[2] Added a main.js into raphael/eve/ which looks like this...

require.config({
    paths: {
        "eve": "libs/raphael/eve/eve"
    }
});
require(
    ["eve"],
    function(eve) {
        window.eve = eve;
    }
);

[3] Added a main.js into raphael/ which looks like this...

require.config({
    paths: {
        "eve": "libs/raphael/eve/main",
        "raphael": "libs/raphael/raphael"
    },
    shim: {
        'raphael': {
            deps: ["eve"]
        }
    }
});
require(
    ["eve", "raphael"],
    function() {}
);

[4] And then I can use it like...

require.config({
    paths: {
        "raphaelLoader" : "libs/raphael/main"
    }
});
require(
    ["raphaelLoader"],
    function() {...}
);

This does seem to work, and it allows me to not monkey with eve or Raphael source. This leaves Raphael as a global, which is OK by me in this case.

Caveat: I'm just getting my head wrapped around RequireJS and modules, so be thee ware.

UPDATE: What I wrote above worked sometimes but had timing issues. I think I've nailed a very simple fix for this, which I've just shared here: https://github.com/papakpmartin/raphael-loader

OK, well you got to see me work my way through this, but I think I found my way back home. You don't need my raphael-loader above. Just do this...

javascript
paths: {
"eve": "libs/raphael/eve/eve",
"raphael": "libs/raphael/raphael"
},
shim: {
'eve': {
exports: "eve"
},
'raphael': {
deps: ["eve"],
exports: "Raphael"
}
}


...and then just use "raphael" as a dependency.

So far, this seems to be working great.

chiefy commented Feb 22, 2013

@papakpmartin only problem with that is you're loading eve twice, once for export and once within the raphael.js closure. Not a huge deal, but just FWIW.

@chiefy I hadn't thought of that, but yeah... of course. I guess it's not a terrible consequence, but again, since I'm learnig my way through this, I thought I'd try avoiding the two eves, so I revised my raphael-loader module to load eve, assign it to window, and then loads the three "raw" Raphael files. So this seems to be working fine, and I think it avoids what you showed me. Thanks for the help! :)

UPDATE: Example usage here: http://papakpmartin.github.com/raphael-loader/

I haven't dug into it that deep, but it seems to be a versioning problem (at least for me).
I've gotten it to work with:

https://github.com/adobe-webplatform/eve.git#~0.2.4
http://github.com/DmitryBaranovskiy/raphael.git#~2.1.0

require.config({
    paths: {
        eve:'../components/eve/eve.min',
        raphael: '//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min'
    },
    shim: {
        raphael: {
            deps: ['eve'],
            exports: 'Raphael'
        }
    }
});

Although the current version of eve is something like 0.8 I think....

@alvaromuir Can you do that with a remote resource without the async plugin?

Yea.
And I found that my problem may have been that I was trying to use Eve.js instead of eve.js before.
So maybe it's not a version problem, just the wrong library I was trying.

But it works for me, give it a try.

My last tip

require(['raphael'], function() {
  console.log(Raphael);
});

Don't pass in raphael as a parameter to your callback.

+1

I've spent many hours trying to fix this... tried raphael-loader and it didn't prove to be a good solution for my project.

this works for me (so far... :( ). ( everybody, I do realise that I specify dependencies that are not in fact dependencies. However, this works and I can move on :) )

require.config({

    baseUrl: '/js',

    shim: {
        'underscore': {
            exports: '_'
        },
        'swig': {
            exports: 'swig'
        },
        'backbone': {
            deps: ['underscore', 'jquery', 'eve'],
            exports: 'Backbone'
        },
        'eve':{
            exports: 'eve'
        },
        'jqueryForm': {
            deps: ['jquery']
        },
        'bootstrap': {
            deps: ['jquery']
        },
        'raphael': {
            deps: ['eve', 'jquery', 'backbone', 'underscore' ]
        }
    },

    paths: {

        // Modules
        'eve': 'vendor/raphael/eve/eve',
        jquery: 'vendor/jquery-1.9.1',
        underscore: 'vendor/underscore-min',
        backbone: 'vendor/backbone',
        text: 'vendor/text',
        bootstrap: 'vendor/bootstrap.min',
        modernizr: 'vendor/modernizr-2.6.2.min',
        plugins: 'vendor/plugins',
        backbonePoller: 'vendor/backbone.poller.min',
        swig: 'vendor/swig.pack.min',
        jqueryForm: 'vendor/jquery.form',
        'raphael': 'vendor/raphael/raphael'
   }
});

Maybe I am loading things twice and maybe it will fail during optimisation - I don't know. So, no guarantee this will work for you.

Collaborator

tomasAlabes commented May 7, 2013

#724.

tomasAlabes closed this May 7, 2013

defbyte referenced this issue in cdnjs/cdnjs May 24, 2013

Closed

Update Raphael to Latest #1332

redfly commented Jul 13, 2013

If, like I did, you have reason to have Raphael work non-AMD despite running require.js on the page - like the solution matthew-dean first mentioned, you find that subsequent changes to Raphael have broken that workaround. You can make this 'globalize eve and Raphael' workaround work now by deleting the "// AMD support" stuff at the beginning of Raphael, replacing the if/else statement with just:
factory(glob, glob.eve);

and at the end of the eve section:
glob.eve = eve;

Collaborator

tomasAlabes commented Jul 14, 2013

If that is done everyone that uses require js will have the Raphael global variable too (the idea behind require is remove globals...)

redfly commented Jul 14, 2013

Indeed, I'm not suggesting a change to the repository. If one wants to force Raphael to be global despite the presence of require.js, that's what worked for me and could save someone the time I spent.

I don't use require or any other kind of library, just pure, vanilla JS - and I still get "eve not defined" issue with 2.2.X toorshia/justgage#249

Collaborator

tomasAlabes commented Sep 30, 2016

Updated eve in 55ee142. Could you re-check?
I used dev/index.html as a global lib and it worked...

Collaborator

tomasAlabes commented Sep 30, 2016

It's your code, not raphael's which is throwing the error. Eve is inside raphael and not exposed to you.
You can use the raphael.no-deps.js (just fixed) where eve is a dependency of raphael, so you can have eve defined for you and for raphael, and use it outside raphael.

toorshia commented Oct 1, 2016

Oh, so eve not being exposed anymore is the culprit :) Good to know, thanks!

Collaborator

tomasAlabes commented Oct 1, 2016

The idea is to load raphael without leaking any other variable or library into your window or rjs context.
With no-deps you explicitly define eve as your dependency and share it with raphael.

alzuma commented Oct 21, 2016

+1

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