Require+pager.js: pager.extendWithPage is not a function

Question

I have created the following twig template for my symfony 3 project:

requirejs.config({
  baseUrl:'{{asset('') }}',
  paths:{

    'knockout':'{{ asset('assets/vendor/knockout') }}',
    'pager':"{{asset('assets/vendor/pager')}}",
    'bootstrap':"{{asset('assets/vendor/bootstrap/js/bootstrap')}}",

    'jquery':"{{asset('assets/vendor/jquery')}}",
    'jquery_ui':"{{ asset('assets/vendor/jquery-ui') }}",

    'xeditable_bootstrap':"{{ asset('assets/vendor/xeditable/xeditable.js') }}",
    'ko_xeditable':"{{ asset('assets/vendor/knockout/knockout.x-editable') }}",

    'jquery-fileupload':"{{ asset('assets/vendor/jquery_fileupload/jquery.fileupload') }}",
    'jquery-iframe':"{{ asset('assets/vendor/jquery_fileupload/jquery.iframe-transport') }}",
    'jquery-ui-widget':"{{ asset('assets/vendor/jquery_fileupload/jquery.ui.widget') }}",

    'masterViewModel':"{{ asset('assets/js/viewModels/masterViewModel') }}",

    {% block Viewmodels %}
    {% endblock %}

    'compMessage':'assets/js/components/message',
    'extBooleanToggle':'assets/js/extenders/booleanToggle',
  },
  shim:{
    'pager':['knockout'],
    'jquery_ui':['jquery'],
    'bootstrap':['jquery'],
    'xeditable_bootstrap':['jquery-ui','bootstrap'],
    'ko_xeditable':['xeditable_bootstrap'],
    'jquery-fileupload':['jquery-iframe','jquery-ui-widget'],
    'jquery-ui-widget':['jquery_ui'],//Jquery_ui already load jquery
    'jquery-iframe':['jquery']
    {% block CustomShim %}
    {% endblock %}
    },
  waitSeconds: 200,
});

require(['jquery','knockout','pager','masterViewModel'],function($,ko,pager,masterViewModel)
{
    console.log(pager);
    pager.extendWithPage(masterViewModel);
    ko.applyBindings(masterViewModel);
    pager.start();
});

And I render it via this symfony3 controller method:

 /**
 *@Route("/main.js",name="main_javascript")
 *@Method("GET")
 */
 public function frontpage_main()
 {
   $response=$this->render('main.js.twig');
   $response->headers->set('Content-Type', 'application/javascript');

   return $response;
 }

But when I render it on my views via:

<script src="{{asset('assets/vendor/require.js')}}" data-main="{{path('main_javascript')}}" ></script>

I get the following error to my browser's console the following error message:

pager.extendWithPage is not a function

Do you have any sort of idea why does this happen?

Edit 1:

I replaced the:

require(['jquery','knockout','pager','masterViewModel'],function($,ko,pager,masterViewModel)
    {
        console.log(pager);
        pager.extendWithPage(masterViewModel);
        ko.applyBindings(masterViewModel);
        pager.start();
    });

With:

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

The problem still remains.

Edit 2:

As seen in my console pager.js does load:

Edit 3

As requested my view model is:

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

    function MasterViewModel()
    {
        var self=this;

        self.title=ko.observable('');
        var classes=ko.observableArray(['hold-transition','register-page']);

        classes.subscribe(function(data){
            $('body').class(data.join(' '));
        });

        self.bodyRegister=function(){

        }
    }

    return new MasterViewModel();
})

Edit 4

I download pager.js via bower and my bower.json is:

{
  "name": "photoalbum",
  "authors": [
    "Dimitrios Desyllas (pc_magas) <you@example.com>"
  ],
  "description": "A simple photoalbum",
  "main": "",
  "keywords": [
    "photoalbum"
  ],
  "license": "AGPLv3",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "AdminLTE": "admin-lte#^2.3.11",
    "require": "http://requirejs.org/docs/release/2.3.3/minified/require.js",
    "knockout": "^3.4.2",
    "pager": "^1.0.1",
    "jquery-slimscroll": "slimscroll#^1.3.8",
    "fastclick": "^1.0.6",
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "x-editable": "https://github.com/vitalets/x-editable.git#^1.5.1",
    "knockout-x-editable": "https://github.com/brianchance/knockout-x-editable.git#^0.1.2"
  }
}

And I move it via gulp like that:

gulp.task('move_pager',function(){
    gulp.src('bower_components/pager/dist/pager.min.js')
    .pipe(rename('pager.js'))
    .pipe(gulp.dest(web_folder));
});

Answer 1

My problem is that I downloaded for some reason the wrong js via bower. The end bower.json should be:

{
  "name": "photoalbum",
  "authors": [
    "Dimitrios Desyllas (pc_magas) <you@example.com>"
  ],
  "description": "A simple photoalbum",
  "main": "",
  "keywords": [
    "photoalbum"
  ],
  "license": "AGPLv3",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "AdminLTE": "admin-lte#^2.3.11",
    "require": "http://requirejs.org/docs/release/2.3.3/minified/require.js",
    "knockout": "^3.4.2",
    "pager": "https://github.com/finnsson/pagerjs.git",
    "jquery-slimscroll": "slimscroll#^1.3.8",
    "fastclick": "^1.0.6",
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "x-editable": "https://github.com/vitalets/x-editable.git#^1.5.1",
    "knockout-x-editable": "https://github.com/brianchance/knockout-x-editable.git#^0.1.2"
  }
}

Also on main.js load correctly the shim with jquery AND knockout as @King Reload says.

Answer 2

it shouldn't be: require(['jquery','knockout','pager','masterViewModel'],function($,ko,pager,masterViewModel)

Instead it should be define(['jquery','knockout','pager','masterViewModel'],function($,ko,pager,masterViewModel)

EDIT:

I might've found the problem, first:

define('jquery-private', ['jquery','knockout','pager','masterViewModel'], function (jq,ko,pager,masterViewModel) {   
    console.log(pager);
    pager.extendWithPage(masterViewModel);
    ko.applyBindings(masterViewModel);
    pager.start();
    return jq.noConflict( true );
});