typescriptknockout.jsknockout-mapping-pluginlaravel-mix

ko.mapping || Cannot read property 'fromJS' of undefined


I am new at typescript. I've been trying to use knockout.mapping with it, however, i can't make it work.

I've installed the libraries of knockout and knockout.mapping, also the @types from the two libraries, and even in that way can't that work.

I am using typescript in a laravel project and i am using laravel mix to generate the javascript files.

I got the next snippet:

///<reference path="../../../../node_modules/@types/jquery/index.d.ts"/>
///<reference path="../../../../node_modules/@types/knockout/index.d.ts"/>
///<reference path="../../../../node_modules/@types/knockout.mapping/index.d.ts"/>

import * as ko from "knockout";
import * as $ from "jquery";

$(function(){
    //this is only a test to check if ko.mapping exists on the ko object. And no, it doesn't appears.
    console.log("Message from jQuery Done", (ko));
});

class MyModel {
    _data: any;
    constructor(the_data: object)
    {
        let self = this;
        let example_observable = ko.observable(); //This is fine

        ko.mapping.fromJS(the_data, self._data); // This fails with the error -> Cannot read property 'fromJS' of undefined
    }
}

let myModel = new MyModel({"x": "y"});
ko.applyBindings(myModel);

My package.json include the knockout and knockout.mapping dependencies.

    "@types/jquery": "^3.3.6",
    "@types/knockout": "^3.4.58",
    "@types/knockout.mapping": "^2.0.33",
    "ajv": "^6.5.2",
    "knockout": "^3.4.2",
    "knockout.mapping": "^2.4.3",

I don't understand what i am doing wrong.

I appreciate any help.

Thanks in advance.


Solution

  • This work for me. Maybe i am applying a bad solution, but definitely it work.

    My problem was with "laravel mix".

    In the webpackconfig i have to add the next one:

    mix.webpackConfig({   
        //...
        externals: { // I supossed any "global" libraries goes here.
            'knockout': 'ko'
        }
        //...
    });
    

    In my HTML have to add:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
    

    And, voilá!

    I did try mix.autoload and didn't work, but maybe because i don't know how to use it.

    Let me know if this is a stupid answer. I will unmark it.