Search code examples
requirejsknockout-3.0pager.js

Require, Knockout and pager are Undefined TypeError

I have the following main:

requirejs.config({
  paths:{
    'text':'../vendor/js/text.min',

    'jquery':"../vendor/js/jquery.min",
    'boostrap':"../vendor/js/bootstrap.min",
    'ko':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",
    'pager':"../vendor/js/pager",

    'imageGroupsVm':'../js/viewModels/imageGroupsViewModel',
    'panelVm':'../js/viewModels/panelViewModel',

    'compMessage':'../js/components/message',
    'extBooleanToggle':'../js/extenders/booleanToggle'
  },
  shim:{
    'bootstrap':['jquery'],
    'pager':['ko'],
    },
  waitSeconds: 200,
});

define(['jquery','ko','pager','panelVm'],function($,ko,pager,panelVm)
{
    pager.extendWithPage(panelVm);
    ko.applyBindings(panelVm);
    pager.start();
});

But for some reason I get these 2 error messages:

TypeError: ko is undefined
Stack trace:
pagerJsModule@http://localhost/symphotest/assets/vendor/js/pager.js:150:9
@http://localhost/symphotest/assets/vendor/js/pager.js:1506:20
newContext/context.execCb@http://localhost/symphotest/assets/vendor/js/require.min.js:1690:24
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:865:43
newContext/Module.prototype.enable/</<@http://localhost/symphotest/assets/vendor/js/require.min.js:1140:29
bind/<@http://localhost/symphotest/assets/vendor/js/require.min.js:131:20
newContext/Module.prototype.emit/<@http://localhost/symphotest/assets/vendor/js/require.min.js:1190:21
each@http://localhost/symphotest/assets/vendor/js/require.min.js:56:31
newContext/Module.prototype.emit@http://localhost/symphotest/assets/vendor/js/require.min.js:1189:17
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:940:25
newContext/Module.prototype.enable@http://localhost/symphotest/assets/vendor/js/require.min.js:1177:17
newContext/Module.prototype.init@http://localhost/symphotest/assets/vendor/js/require.min.js:783:21
callGetModule@http://localhost/symphotest/assets/vendor/js/require.min.js:1204:17
newContext/context.completeLoad@http://localhost/symphotest/assets/vendor/js/require.min.js:1604:1
newContext/context.onScriptLoad@http://localhost/symphotest/assets/vendor/js/require.min.js:1711:21
 require.min.js:900:37

TypeError: pager is undefined
Stack trace:
@http://localhost/symphotest/assets/js/panel-main.js:65:5
newContext/context.execCb@http://localhost/symphotest/assets/vendor/js/require.min.js:1690:24
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:865:43
newContext/Module.prototype.enable/</<@http://localhost/symphotest/assets/vendor/js/require.min.js:1140:29
bind/<@http://localhost/symphotest/assets/vendor/js/require.min.js:131:20
newContext/Module.prototype.emit/<@http://localhost/symphotest/assets/vendor/js/require.min.js:1190:21
each@http://localhost/symphotest/assets/vendor/js/require.min.js:56:31
newContext/Module.prototype.emit@http://localhost/symphotest/assets/vendor/js/require.min.js:1189:17
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:940:25
newContext/Module.prototype.enable/</<@http://localhost/symphotest/assets/vendor/js/require.min.js:1140:29
bind/<@http://localhost/symphotest/assets/vendor/js/require.min.js:131:20
newContext/Module.prototype.emit/<@http://localhost/symphotest/assets/vendor/js/require.min.js:1190:21
each@http://localhost/symphotest/assets/vendor/js/require.min.js:56:31
newContext/Module.prototype.emit@http://localhost/symphotest/assets/vendor/js/require.min.js:1189:17
newContext/Module.prototype.check@http://localhost/symphotest/assets/vendor/js/require.min.js:940:25
newContext/Module.prototype.enable@http://localhost/symphotest/assets/vendor/js/require.min.js:1177:17
newContext/Module.prototype.init@http://localhost/symphotest/assets/vendor/js/require.min.js:783:21
callGetModule@http://localhost/symphotest/assets/vendor/js/require.min.js:1204:17
newContext/context.completeLoad@http://localhost/symphotest/assets/vendor/js/require.min.js:1604:1
newContext/context.onScriptLoad@http://localhost/symphotest/assets/vendor/js/require.min.js:1711:21
 require.min.js:900:37

Furtermore The panelViewModel.js contains:

define(['ko','imageGroupsVm','compMessage'],function(ko,ImageGroupsVM,loginViewModel)
{
  var image_groups=new ImageGroupsVM();


  return {'imageGroups':image_groups};
});

And the ImageGroupsViewModel Contains:

define(['ko','jquery'],function(ko,$)
{
  console.log(ko);
  return function imageGroupsViewModel()
  {
    var self=this;

    self.albums=ko.observableArray();

    self.init=function()
    {
      self.albums([]);

      self.fetchData();
    }

    self.fetchData=function()
    {
      console.log("Data Fetched");
    };

    function Album(data)
    {

    }
  };
})

All the JS files that I have are: (note that tin vendor classes are the external libraries I load)

Js Files

Solution

  • I managed to fix it by replacing the 'ko' with 'knockout' whenever is required.

    More specifically on main (the file you include in data-main on your html)

    The following line:

    'ko':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",

    Changed into:

    'knockout':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",

    I Included on shim:

    'pager':['knockout'],

    And the 

    define(['jquery','ko','pager','panelVm'],function($,ko,pager,panelVm)

    Changed into

    define(['jquery','knockout','pager','panelVm'],function($,ko,pager,panelVm)

    Therefore my main is:

    requirejs.config({
  paths:{
    'text':'../vendor/js/text.min',

    'knockout':"https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min",
    'pager':"../vendor/js/pager.min",
    'jquery':"../vendor/js/jquery.min",
    'boostrap':"../vendor/js/bootstrap.min",

    'imageGroupsVm':'../js/viewModels/imageGroupsViewModel',
    'panelVm':'../js/viewModels/panelViewModel',

    'compMessage':'../js/components/message',
    'extBooleanToggle':'../js/extenders/booleanToggle'
  },
  shim:{
    'pager':['knockout'],
    'bootstrap':['jquery'],
    },
  waitSeconds: 200,
});

define(['jquery','knockout','pager','panelVm'],function($,ko,pager,panelVm)
{
    pager.extendWithPage(panelVm);
    ko.applyBindings(panelVm);
    pager.start();
});

    Also on my other javascript files on my project that are loaded with require I changed the line:

    define(['ko',...,'other_lib'],function(ko,....,other_lib)

    With: 

    define(['knockout',...,'other_lib'],function(ko,....,other_lib)

    Note: I also changed theese lines on other main.js that I load with require on another pages:

    'ko':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",

    Changed into:

    'knockout':"http://knockoutjs.com/downloads/knockout-3.4.0.debug",

    I did this in order to load all the modules I make by using require.