Require, Knockout and pager are Undefined TypeError

Question

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/



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)

Dimitrios Desyllas · Accepted Answer

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.

Require, Knockout and pager are Undefined TypeError

Answers (1)

Related Questions