CODEWITHSUNDEEP
javascriptrequirejs
Skylar Saveland
Skylar Saveland

Reputation: 11464

Require module defined in another script

Script A

;(function(g){

  define('hotness', [], function() {
    function f() {;
      console.log('gotem');
    }
    return f;
  });

  define('otherModule', [], function() {});


})(this);

Script B

define([
  'ScriptA',
], function() {

  var hotness = require('hotness')
});

Error: Module name "hotness" has not been loaded yet for context: _

What is the recommended way to require in a definition from ScriptA in ScriptB?

I've also tried:

Script B Alt

define([
  'require',
  'ScriptA',
  'hotness'
], function(require) {

  var hotness = require('hotness')
});

Which gives me

Error loading resource ... /hotness.js: No such file or directory Error: Script error for: hotness

EDIT:

It's important to note that ScriptA stands as is and will not be modified. The question is how can I get at the named module in ScriptA from ScriptB.

EDIT2:

I have no control over the HTML or any other aspect of the page. I must do everything within ScriptB.

EDIT3:

I have an example of something that works but it looks like a horrible antipattern work-around so I didn't even want to mention it:

define(['require'], function(require) {
    // why use window? IDK.
    // this is just verbatim what is "working" for someone else
    window.require(['scriptA'], function(sA) {
        //sA never actually used
        window.require([
            'otherModule'
        ], function(oM) {
            var hotness = require('hotness'),

Upvotes: 0

Views: 209

Answers (2)

Louis
Louis

Reputation: 151401

You should use a bundles configuration. Given what you've described works, you should use:

bundles: {
    'scriptA': ['hotness', 'otherModule']
}

This essentially tells RequireJS "when you want to find hotness or otherModule then load scriptA because they are defined there". I use this every now and then to load modules from bundles that have been generated with r.js.

Other than this Joseph the Dreamer is correct that you should not in the same module mix the AMD and CommonJS methods of getting dependencies.

Upvotes: 1

Joseph
Joseph

Reputation: 119847

Your ScriptA uses named modules. They must be loaded after RequireJS but prior to any of the dependents. RequireJS does not recommend named modules unless you know what you're doing (like load a library like a regular script, and register it as a module at the same time).

Error: Module name "hotness" has not been loaded yet for context: _

This is a generic RequireJS error, when the module is loaded from the server, but somehow RequireJS can't provide it to the dependent. Usually happens when the module has syntax errors or when there's a circular dependency, among others.

ScriptB also has problems. It's trying to use both AMD style (array dependencies) and CommonJS style (explicit require). Just use one of the two syntaxes. Note that in the CommonJS format, it needs the module to have a first argument named require to trigger CommonJS format of writing.

define(['hotness'], function(hotness) {
  // use hotness
});

// or

define(function(require){
  var hotness = require('hotness');
  // use hotness
});

Error loading resource ... /hotness.js: No such file or directory

Be sure to set a base url. It can be implicit (based on the data-main location) or explicit (using require.config). Module names are usually paths + filenames relative to the base url.

It is advised that you use one file per module, containing a module definition that has no name (the file name becomes the name of the module) and resides somewhere under the set baseUrl.

Upvotes: 0

Related Questions