Can't use Component modules with a RequireJS environment

[bartzy]

Hi,

I'm trying to use a Component-based module (https://github.com/abpetkov/switchery) with a RequireJS environment. I'm obviously using the dist/switchery.js files that I guess is called standalone in Component.

The thing is, Switchery depends on FastClick. Somewhere in the standalone dist JS file there is this code:

if (typeof define !== 'undefined' && define.amd) {

    // AMD. Register as an anonymous module.
    define(function() {
        'use strict';
        return FastClick;
    });
} else if (typeof module !== 'undefined' && module.exports) {
    module.exports = FastClick.attach;
    module.exports.FastClick = FastClick;
} else {
    window.FastClick = FastClick;
}

I guess this is concatenated by Component from the FastClick lib itself.

The first if statement is executed of course (Since define exists because we use a RequireJS environment), and an anonymous RequireJS module is anounced. The other statements (else if and else) are not executed of course.

This causes 2 major issues:

1. When Switchery needs FastClick and executed require('fastclick'), Component's require function will return an empty Object since there is no module.exports for that at all. That of course breaks Switchery.
2. RequireJS's define function now defined an anonymous module in a file that is not related in anyway to that module (FastClick). It wrecks havoc on the process of loading other RequireJS modules.

I gave Switchery as an example, but I believe this happens with all Component builds for modules that have dependencies, and used in a RequireJS environment.

Any input on this issue would be much appreciated!

Thanks, Bar.

[timaschew]

I guess this is concatenated by Component from the FastClick lib itself.

No FastClick, provides this to support several module loaders, so this part has nothing to do with component. You can see here the raw script (not build by component or somehting else): https://github.com/ftlabs/fastclick/blob/master/lib/fastclick.js#L829-L840

When Switchery needs FastClick and executed require('fastclick'), Component's require function will return an empty Object since there is no module.exports for that at all. That of course breaks Switchery.

no this is wrong, component is throwing an error if a module could not be loaded.

It looks like someone is using something wrong, but I'm not sure yet.

[bartzy]

OK, sorry for throwing you in the wrong direction then.

See this issue: https://github.com/abpetkov/switchery/issues/22 , if it helps at all...

Thanks!

[bartzy]

@timaschew Any news on this issue?

Thanks!

[timaschew]

I think this is a switchery/fastclick issue? see https://github.com/abpetkov/switchery/issues/22#issuecomment-34957892

[bartzy]

I don't think so - Switchery uses Component as its build/dependency system. It depends on FastClick. Then Component just concatenates Fastclick into the switchery dist file, and that breaks RequireJS (since you can't just concatenate a requireJS module (fastclick) inside another file (switchery dist file)...

[timaschew]

okay whatever the comment did said: https://github.com/abpetkov/switchery/issues/22#issuecomment-34957892 it seems to be fixed.

---

I tried out to install switchery via component install abpetkov/switchery this works fine, here is the output:

   installed : abpetkov/switchery@0.8.0 in 1708ms
   installed : abpetkov/transitionize@0.0.3 in 1183ms
   installed : ftlabs/fastclick@v0.6.11 in 1218ms
   installed : component/events@1.0.9 in 1248ms
     install : complete

Then I run component build --dev and this worked as well. I embed the generated js file into my html file and open it in the browser. Then I added a breakpoint into the switchery file. Then I run this command in the webdev toolbar require.latest("abpetkov~switchery") and verified that switchery was required successfully.

[bartzy]

Did you try to build a standalone version of switchery (through component, it has a Makefile and can be built with make standalone), and then require it with RequireJS? It doesn't work.

The problem is not with FastClick, It happened to me when I added Hammer.js to Switchery as well (I forked it). The problem is with the fact that Component concatenates all the dependencies when building a standalone file, and then RequireJS breaks when you try to load require Switchery with it.

Thanks for the help!

[timaschew]

I think that's a feature, it's by design that you cannot require something from a standalone output, that's why it's called standalone

[bartzy]

So there's no way to use RequireJS to load code that uses Component as a build/dependency system (like Switchery)?

[timaschew]

there is, if you don't use --standalone, instead wrap it into a UMD

[bartzy]

Thanks.

How can I do that? I'm using Bower to pull Switchery as a dependency.

[timaschew]

there is, if you don't use --standalone, instead wrap it into a UMD

sorry, that was wrong

So, if you would use component to build something on top of Switchery, the you should avoid --standalone But when you using another module system like requireJS, then you're right. So I executed the UMD build of Switchery (dist/switchery.js), it works fine, it requires Switchery and fastclick without any problems.

So if you have still a problem provide a script or a repository, how I can reproduce your problem.