title: RequireJS AMD component with non-AMD transitive dependency using bower
body: <p>I am developing an AMD module that has a dependency that is defined in bower.  The app that consumes the module also has this dependency.  Is there a way to define the the dependency in the module's amd definition so that the application that uses the module doesn't have to name it the way the component expects?</p>
  
  <p>the module's bower.json</p>
  
  <pre><code>{...
    "dependencies": {
      "my_module_dependency": "~1.2.21"
    }
  }
  </code></pre>
  
  <p>the module definition which supports amd (but doesn't require it) mymodule.js:</p>
  
  <pre><code>(function (root, factory) {
    if(typeof define === "function" &amp;&amp; define.amd) {
      define(function(require) {
        //this works only if the app that uses this module defines my_module_dependency in main.js
        var my_module_dependency = require("my_module_dependency");
        return (root.mymodule = factory(my_module_dependency));
      });
    } else {
      root.mymodule = factory(root.my_module_dependency);
    }
  }(this, function(my_module_dependency) {
    ...
  }
  </code></pre>
  
  <p>This works but it depends that the consuming application defines a requirejs dependency named "my_module_dependency" in it's main.js, but I want to be able to refer to it without forcing the consuming app to name it the way the component wants.  </p>
  
  <p>I know my module is a bower component, and my module's bower.json defines the my_module_dependency so I know where the dependency is relative to my component, but I am unable to have requirejs work with the relative path outside of my own component to refer to something the consuming app already has in it's requirejs dependency.  </p>
  
  <p>That is to say, the following doesn't work:</p>
  
  <pre><code>(function (root, factory) {
    if(typeof define === "function" &amp;&amp; define.amd) {
      define(function(require) {
        //we know this will be here b/c it's a bower dep and so is this module
        var my_module_dependency = require("./bower_components/my_module_dependency");
        return (root.mymodule = factory(my_module_dependency));
      });
    } else {
      root.mymodule = factory(root.my_module_dependency);
    }
  }(this, function(my_module_dependency) {
    ...
  }
  </code></pre>
  
  <p>As expected there is only one call to retreive my_module_dependency since the consuming app already required it (if I were to misspell it I would see the consuming app load the correct version then my component try to load the misspelled resource and get a 404).  There are no immediate console errors but then after a second or two this error shows:</p>
  
  <pre><code>Uncaught Error: Load timeout for modules: bower_components/angular/angular
    http://requirejs.org/docs/errors.html#timeout require.js:166
    makeError require.js:166
    checkLoaded require.js:692
    (anonymous function)
  </code></pre>
  
  <p>Also, I need the consuming app and the component to be using the same instance of my_module_dependency.</p>
  
  <p>Any guesses?</p>