Backbone collection is not a constructor
<p>I've already checked the answers from people that have apparently the same problem but I haven't been able to fix my problem yet. </p>

<p>I have a view (<code>teacher.profile.js</code>) which is calling a collection (<code>levels.js</code>) which has a collection (<code>subject.js</code>), but when I load the page the subject collection is always <code>undefined</code> and said not to be a constructor. </p>

<p>After refreshing so many times, sometimes the second one, the <code>subject</code> collection is there and works.</p>

<p>Could anyone tell me what is wrong, please?</p>

<p>Thanks</p>

<p><strong>subject.js</strong></p>

<pre><code>    define(["GB"], function(GB) {

      var subjectModel = GB.Model.extend({
        idAttribute:"subjectId",
        defaults: {
          subjectId: '',
          name: '',
          levelId: '',
          selected: false
        }
      });

      return subjectModel;
    });
</code></pre>

<p><strong>subjects.js</strong></p>

<pre><code>define([
      "GB",
      "modules/register/teacher/models/subject"],
      function (GB, SubjectModel) {

      var subjectCollection = GB.Collection.extend({
        model: SubjectModel,
        url: "webapi/api/Administration/Subject"
      });

      return subjectCollection;
    });
</code></pre>

<p><strong>level.js</strong></p>

<pre><code>    define(['GB', 'modules/register/teacher/models/subjects'], function (GB, SubjectCollection) {

      var levelModel = GB.Model.extend({
        defaults: {
          levelId: '',
          name: '',
          iconClass: '',
          subjects: ''
        },
        parse: function(attrs) {
          **attrs.subjects = new SubjectCollection(attrs.subjects);** //Here is where the error is thrown. SubjectCollection is not a constructor.
          return attrs;
        }
      });

      return levelModel;
    });
</code></pre>

<p><strong>levels.js</strong></p>

<pre><code>    define(["GB", "modules/register/teacher/models/level"], function (GB, LevelModel) {

      var levelCollection = GB.Collection.extend({
        model: LevelModel,
        url: "webapi/api/Administration/Level"
      });

      return levelCollection;
    });
</code></pre>

<p><strong>teacher.profile.js</strong> view</p>

<pre><code>define([
      "GB",
      "tpl!modules/register/teacher/teacherProfile",  "modules/register/teacher/subject.level"
    ], function(GB, Template, SubjectLevelView) {
      var view = GB.Views.Item.extend({
        template: Template,
        ui: {
          subjects: "#subject-list",
          levels: "#level-list",
          infoTitle: "#info-title",
          subjectsLevels: "#subjects-levels"
        },
        initialize: function() {
          this.userLevels = [];
        },
        onRender: function() {
          var self = this;
          this.ui.infoTitle.text(GB.Localise("teacher-data-title"));
          var levelsPromise = this.collection.fetch();
          $.when(levelsPromise)
            .then(function() {
              var levelsSubjects = _.map(self.collection.models, function(item) {
                if (item.get("subjects").length &gt; 0) {
                  var view = new SubjectLevelView({ model: item });
                  self.userLevels.push(item);
                  return view.render().el;
                }
              });
              self.ui.subjectsLevels.append(levelsSubjects);
            });
        }
      });
      return view;
    });
</code></pre>

<p><strong>main.js</strong></p>

<pre><code>require.config({
      map: {
          '*': {
              'css': 'plugins/require-css/css',
              'tpl': 'plugins/require.lodash.template', //this is our templating helper tpl!.html, its brings the template in already underscored, this is faster slightly than text! &amp; subsequent template
              'lodash': 'underscore'
          }
      },
      paths: {
          'plugins': '../plugins',
          'styles':'../css',
          'localisation':'core/localisation',
          'jquery': '../lib/jquery-2.1.4',
          'jquery.browser': '../plugins/jquery.browser',
          'jquery.video': '../plugins/vide/jquery.vide',
          'waypoints': '../plugins/waypoints/jquery.waypoints',
          'backbone': '../lib/backbone',
          'marionette': '../lib/backbone.marionette',
          'text': '../lib/text',
          'underscore': '../lib/lodash.underscore', //yes underscore is now lodash - its a better performer + extra features + no downside :)
          'lodash': '../lib/lodash.underscore',
          'bootstrap': '../lib/bootstrap',
          'bootstrap-dialog': '../plugins/bootstrap-dialog/js/bootstrap-dialog',
          'modernizr': '../lib/modernizr-2.8.3',
          'backbone.validation': '../plugins/backbone-validation',
          'themepunch.tools': '../plugins/rs-plugin/js/jquery.themepunch.tools.min',
          'themepunch.rev': '../plugins/rs-plugin/js/jquery.themepunch.revolution.min',
          'smoothscroll': '../plugins/SmoothScroll',
          'json': '../plugins/requirejs-plugins/json',
          'cldr': '../plugins/localisation/cldrjs/cldr',
          'cldr-data': '../plugins/localisation/cldr-data',
          'globalize': '../plugins/localisation/globalize/globalize',
          'localise':'localisation/localise',
          'GB': 'app'
      },
      shim: {
          'marionette': {
              deps: ['backbone'],
              exports: 'Marionette'
          },
          'backbone': {
              deps: ['underscore', 'jquery'],
              exports: 'Backbone'
          },
          'underscore': {
              exports: '_'
          },
          'backbone.validation': {
              deps: ['backbone', 'underscore']
          },
          'bootstrap': {
              deps: ['jquery'],
          },
          'bootstrap-dialog': {
              deps: ['bootstrap'],
          },
          'smoothscroll': {
              deps: ['jquery.browser']
          },
          'themepunch.tools': {
              deps: ['jquery']
          },
          'themepunch.rev': {
              deps: ['themepunch.tools']
          },
          'jquery.browser': {
              deps: ['jquery']
          },
          'waypoints': {
              deps: ['jquery']
          },
          'jquery.video': {
              deps: ['jquery']
          },
          'globalize': {
              deps: ['cldr']
          },
          'json': {
              deps: ['text']
          }
      }
  });
  require([
      "GB",
      "routes/application.router",
      "bootstrap",
      "core/validation"],
      function (GB, AppRouter) {
          GB.routers.application = new AppRouter();
          GB.start();
      });
</code></pre>

<p><strong>app.js</strong></p>

<pre><code>    define([
        "marionette",
        "core/GB.ini",
        "globalize",
        "localisation/localise",
        "bootstrap-dialog",
        "json!cldr-data/supplemental/likelySubtags.json",
        "json!cldr-data/supplemental/plurals.json",
        "json!cldr-data/supplemental/timeData.json",
        "json!cldr-data/supplemental/weekData.json",
        "json!localisation/messages/es.json",
        "globalize/number",
        "globalize/message",
        "globalize/plural",
        "modernizr",
        "smoothscroll",
    ],
        function (Marionette, AppIni, Globalize, Localise, Dialog, LikeSubtags, Plurals, TimeData, WeekData, Messages) {
            var GB = window.GB = new Marionette.Application();
            GB.User = {};
            GB.routers = {};

            Globalize.load(
                LikeSubtags,
                Plurals,
                TimeData,
                WeekData
            );
            Globalize.loadMessages(Messages);
            Globalize.locale("es");

            GB.Globalize = Globalize;
            GB.Localise = Localise;
            GB.Dialog = Dialog;

            GB.Model = Backbone.Model.extend({});
            GB.Collection = Backbone.Collection.extend({});

            GB.Views = {
                //if we do expand on these views they should probably get their own file.
                Item: Marionette.ItemView.extend({}), //for a single model
                Collection: Marionette.CollectionView.extend({}), //for a collection
                Composite: Marionette.CompositeView.extend({}), //for a combination of a model and a collection
                Layout: Marionette.LayoutView.extend({})
            };

            GB.session = new GB.Model();

            GB.getUrl = function () {
                return Backbone.history.location.origin + Backbone.history.location.pathname;
            }

            GB.getCurrentRoute = function () {
                return Backbone.history.fragment;
            };



            GB.on("before:start", function () {
                var RegionContainer = Marionette.LayoutView.extend({
                    el: "#app-container",

                    regions: {
                        header: "#header-wrapper",
                        main: "#main-region",
                        footer: "#footer-region",
                        dialog: "#dialog-region"
                    }
                });

                GB.regions = new RegionContainer();

            });

            GB.on("start", function () {
              require(["modules/header/header.module"], function () {
                    GB.Header.Controllers.Overview.show();
                });
              require(["modules/footer/footer.module"], function () {
                    GB.Footer.Controllers.Overview.show();
                });
                AppIni.start();
                Backbone.history.start();
                if (GB.getCurrentRoute() === "")
                    Backbone.history.navigate("#home", { trigger: true });
            });

            return GB;
        });
</code></pre>

<p>Foder Structure</p>

<p><a href="https://i.stack.imgur.com/CwTta.png" rel="nofollow noreferrer">enter image description here</a></p>