Circular Dependencies in modules using requireJs

Question

Reading the requireJs documentation,
in order to fix the Circular Dependencies, is suggested to use exports to create an empty object for the module that is available immediately for reference by other modules.

I try this code but it seems to do not work. What is wrong?

P.S.:
read the comments for seeing the output,
especially the B module inside setTimeout call.

// A module
define([
    'b'
], function (b) {
    console.log('B:', b); // B, Object
    var A = {
        boo: 1
    };

    return A;
});

// B module
define([
    'a',
    'exports'
], function (a, exports) {
    console.log('A:', a); // A, undefined (as I was expecting)
    exports.A = function () {
        return a;
    }

    var B = {
        bar: 1
    };

    setTimeout(function () {
        console.log('exports.A', exports.A()); // exports.A undefined 
                                           // I would like to access the A object
                                           // which is defined in A module
    }, 500);

    return B;
});

// main.js

(function () {

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

I think this might be helpful http://stackoverflow.com/questions/4771025/understanding-when-and-how-to-use-require-js?rq=1 — Jake, Jul 23 '12 at 05:17
@lorraine-bernand Did you figure out how to solve this? The link above doesn't give me enough handles to solve it. — donnut, Sep 28 '12 at 08:46
I wish this was an answered question. I run into this all the time :) — SimplGy, Jul 15 '13 at 23:56
possible duplicate of [How to handle circular dependencies with RequireJS/AMD?](http://stackoverflow.com/questions/4881059/how-to-handle-circular-dependencies-with-requirejs-amd) — tne, Dec 04 '13 at 12:13

score 1 · Answer 1 · answered Apr 24 '14 at 23:05

You should be able to use the synchronous version of require() in your B module to access the "A" module:

// B module
define([
    'a',
    'exports'
], function (a, exports) {
    console.log('A:', a); // A, undefined (as I was expecting)
    exports.A = function () {
        return require('a');
    }
    ...
});

SimplGy · Answer 2 · 2013-07-19T00:28:48.020

0

I often have circular issues using AMD modules to build an application core that both stands up many modules and contains config or other useful objects for those modules to use.

I did some experimenting today and this seems to work pretty well.

define(['exports', 'underscore', './config', './mediator'],
  function (exports, _, Backbone, config, Mediator){

    Core = /* ... */

    // Publicize a core 'singleton' so that it's dependencies can access it, and so can modules that define it as a dependency themselves.
    core = new Core()
    exports.core = core //publicize it in a way that supports circularity
    return core // And also publicize it normally
  }
)

The objects are both '===' equal to each other, so this seems very promising.

EDIT:

The above method doesn't work when optimized. Here's another method that may (untested): https://github.com/requirejs/example-multipage/blob/master/www/js/app/main1.js#L2

define(function (require) {
  var $ = require('jquery'),
      lib = require('./lib'),
      Core;

   Core = /* ... */

   return new Core()
});

edited Jul 19 '13 at 00:28

answered Jul 16 '13 at 00:16

SimplGy

20,079
15
107
144

Actually, I would not use this method. It works for unoptimized code but if you run the optimizer on it your exports are not available, looks like. – SimplGy Jul 16 '13 at 23:34
I'm grappling with this issue of circular dependencies myself right now, so am wondering if you have a suggested alternative – Dexygen Jul 17 '13 at 21:29
Unfortunately not. It's been an issue for the year or so I've been using RequireJS and CurlJS for application module management. My 'solution' is to pass a reference to the mediator object to everything that the mediator depends on, and start a new dependency chain at the 'page' level. This looks something like this: https://github.com/SimpleAsCouldBe/appCore/blob/master/shared/appCore/app.js#L45 It's not great though. I want to be able to always get my dependencies through declaration :( – SimplGy Jul 18 '13 at 00:57
I'll have a look thanks. Waiting to leave for work this morning I blogged on everything I think is wrong with require.js -- if it weren't for starting a contract at a shop that's already using it, I would never do so voluntarily: http://codrspace.com/dexygen/does-require-js-introduce-more-problems-than-it-solves-/ – Dexygen Jul 18 '13 at 11:49
1

I actually love AMD modules. They are much better than any alternative I've found. My current project manages 135 .coffee modules and 72 .hbs templates using requireJS. The circular problem is real and does impact organization, but the DRY problem your post mentions seems small, and sort of a feature--It's nice to have control over renaming the dependency between filename and variable name. – SimplGy Jul 18 '13 at 17:39

score 0 · Answer 3 · answered Mar 21 '14 at 16:47

One option would be not to return the module itself, but a function that instantiates the module (in this example it would a constructor as defined in typescript, at the bottom is the generated js code -note that interfaces do not generate .js code)

File IA.ts

/// <reference path="IB.ts" />
interface IA{
    funcA();
    _classB : IB;
}

File IB.ts

/// <reference path="IA.ts" />
interface IB{
    funcB();
    _classA : IA;
}

File ClassA.ts

/// <reference path="IA.ts" />
/// <reference path="IB.ts" />

export class ClassA implements IA
{
    _classB : IB = null;

    constructor(classB : IB)
    {
        this._classB = classB;
        if (classB){
            this._classB._classA = this;
        }
        return this;
    }

    funcA(){
        console.log('I am ClassA');
    }
}

File ClassB.ts

/// <reference path="IA.ts" />
/// <reference path="IB.ts" />
export class ClassB implements IB
{
    _classA : IA = null;
    constructor(classA : IA)
    {
        this._classA = classA;
        if (classA){
            this._classA._classB = this;
        }
        return this;
    }
    funcB(){
        console.log('I am ClassB');
    }
}

File MainTest.ts

/// <reference path="../../def/require.d.ts" />
/// <reference path="IA.ts" />
/// <reference path="IB.ts" />
define(['ClassA', 'ClassB'],
    function (classA, classB)
    {
        var aa : IA = new classA.ClassA();
        var bb : IB = new classB.ClassB(aa);

        bb.funcB();
        aa._classB.funcB();
        bb._classA.funcA();
        aa.funcA();
    });

And the generated js code:

File ClassA.js

define(["require", "exports"], function(require, exports) {
    var ClassA = (function () {
        function ClassA(classB) {
            this._classB = null;
            this._classB = classB;
            if (classB) {
                this._classB._classA = this;
            }
            return this;
        }
        ClassA.prototype.funcA = function () {
            console.log('I am ClassA');
        };
        return ClassA;
    })();
    exports.ClassA = ClassA;
});

File ClassB.js

define(["require", "exports"], function(require, exports) {
    var ClassB = (function () {
        function ClassB(classA) {
            this._classA = null;
            this._classA = classA;
            if (classA) {
                this._classA._classB = this;
            }
            return this;
        }
        ClassB.prototype.funcB = function () {
            console.log('I am ClassB');
        };
        return ClassB;
    })();
    exports.ClassB = ClassB;
});

File MainTest.js

define(['ClassA', 'ClassB'], function (classA, classB) {

    var aa = new classA.ClassA();
    var bb = new classB.ClassB(aa);

    bb.funcB();
    aa._classB.funcB();
    bb._classA.funcA();
    aa.funcA();

});

finally, the output will be:

I am ClassB

I am ClassA

Circular Dependencies in modules using requireJs

3 Answers3

Linked