Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

raphael breaks if loaded via require-js. #524

Closed
iwyg opened this Issue · 61 comments

37 participants

Thomas Appel Azat Mardan Brandon Kase Matthew Dean artureg Timophey Łukasz Bieniek Morten Rafael Patrick McElhaney Lewis Barclay Michal Letynski Malte Legenhausen Mark DiMarco Artem Sapegin Alvaro Nistal Juan Ignacio Saenz juancruz Jim Klo Hay Kranen Peter Ajtai Rinat Veera Arjen Jonathan and others
Thomas Appel

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 Mardan

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

Thomas Appel

ah, thanks, didn't see that

Brandon Kase

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

Matthew Dean

Yep, same issue here. Is there a fix?

artureg

i have "eve is not defined" too

artureg

raphael breaks if loaded via dojo.js

Timophey

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 Mardan
Timophey

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

Łukasz Bieniek

Solution for amd already exists:
#540

Morten

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)

Matthew Dean

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.

Rafael

same problem...

Azat Mardan

Thanks @matthewdl :)

Morten

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.

Matthew Dean

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

Patrick McElhaney

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

Lewis Barclay

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

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

Michal Letynski

same here ...

Malte Legenhausen

+1 for solution

Artem Sapegin

+1.

Alvaro Nistal

+1

Juan Ignacio Saenz

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!

Thomas Appel

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.

Juan Ignacio Saenz

Thanks @iwyg!

Jim Klo

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

Juan Ignacio Saenz

@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.

Patrick McElhaney

@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@e2cea67

Juan Ignacio Saenz

You are rigth, Thanks @pmcelhaney!

Hay Kranen
hay commented

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).

Peter Ajtai

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

Rinat

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

Veera

Facing same issue. :-1:

Arjen Jonathan

+1 Waiting for proper fix.

Alexander Hofstede

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

Stefan Schmidt

+1 for officially supporting require.js

Brian Le

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

Noah Robison-Cox

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

Arjen Jonathan

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

Rinat

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

Arjen Jonathan

@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.

Thomas Appel

as I already mentioned here: issuecomment-7050500

Matías Aguirre

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.

André Haveman

@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.

Christopher Najewicz

@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.

papakpmartin

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

papakpmartin

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...

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.

Christopher Najewicz

@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.

papakpmartin

@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/

Alvaro Muir

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....

papakpmartin

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

Alvaro Muir

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.

Timmy Willison timmywil referenced this issue from a commit
Timmy Willison timmywil AMD adjustment: define Raphael as an anonymous module (rather than na…
…med). Also adjust the build for smaller size. Closes gh-524.
0583790
Patryk Kabaj

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.

Tomas Alabes
Collaborator

#724.

Tomas Alabes tomasAlabes closed this
Chris Davis defbyte referenced this issue in cdnjs/cdnjs
Closed

Update Raphael to Latest #1332

redfly

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;

Tomas Alabes
Collaborator

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

redfly

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.