Challenges with meteor integration

Webix JS
#1

Based on this guide from the url below, meteor integration fails to work.
https://docs.webix.com/desktop__meteor.html

Reproduction Steps:

Step 1 - download necessary file

$ meteor create webixTest
$ cd meteorTest
$ meteor npm i --save webix
$ meteor npm i --save webix-meteor-data

Step 2 - verify library is downloaded
inside /node_modules, two folders with contents appeared under

  1. /node_modules/webix
  2. /node_modules/webix-meteor-data

Step 3 - add simple webix code
/client/main.js:

  • removed everything, added the lines below
webix.ui({
        type:"line",
        container:"testA",
        rows: [
            { template:"Row 1"},
            { template:"Row 2"}
        ]
});

/client/main.html

  • removed everything within header and body tags

At this point, something problem is reproduced

Symptoms:

  1. In chrome’s console:
main.js:4 Uncaught ReferenceError: webix is not defined
    at main.js (main.js:4)
    at fileEvaluate (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343)
    at require (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238)
    at app.js?hash=bface46fb54a662976167d3daadcc8e04420fac6:49
  • chrome states webix is not defined. In the integration guide, nothing is mentioned about importing the library. We will import it anyways
  1. Forcibly importing the library
  • added “import webix from ‘webix/webix’” to the first line of client.js
  • chrome’s console:
main.js:4 Uncaught TypeError: webix.ui is not a function
    at main.js (main.js:4)
    at fileEvaluate (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343)
    at require (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238)
    at app.js?hash=4a36860f9b8bce2200a813bd8cf87d2d96d90404:54
  • so chrome is complaining webix.ui is not a function, but lets test it out using chrome’s console.
  • console output:
>webix.ui
ƒ (t,n,r){webix.Nb=!0;var a=webix.isArray(t),o=webix.toNode(t.container||n||document.body);
o.s&&(r=s(o,a,r));var h,l=o==document.body;if(t.s||o&&a?h=t:(o&&l&&(t.$topView=!0),t.Ob||(t.Ob={}),h=e.A(t)),…
  • webix.ui appears to be loaded and accessible
  1. Execute webix.ui initialization in chrome console
>webix.ui({
        type:"line",
        container:"testA",
        rows: [
            { template:"Row 1"},
            { template:"Row 2"}
        ]
    });
> modules.js?hash=c65a3842aaa3cf4dbe863a8c0a9324ddee5fe4f5:1173 Uncaught TypeError: Cannot read property 's' of null
    at Object.webix.ui (modules.js?hash=c65a3842aaa3cf4dbe863a8c0a9324ddee5fe4f5:1173)
    at <anonymous>:1:7
  • we see that there is an uncaught error where ‘s’ is null
  • if we imported webix from webix/webix-debug, the error message is the following:
> modules.js?hash=c1cee2a27f4688ccd24846b55ffcf2655f5cec4c:5568 Uncaught TypeError: Cannot read property '_settings' of null
    at Object.webix.ui (modules.js?hash=c1cee2a27f4688ccd24846b55ffcf2655f5cec4c:5568)
    at <anonymous>:1:7
  1. Lets add html tags to client/main.html
<body>
    <div id='testA' style='width:600px; height:600px; margin:20px;'></div>
</body>
  • initially nothing happens, still getting webix.ui is not a function error
  • however, if we initialize webex.ui inside chrome console
>webix.ui({
        type:"line",
        container:"testA",
        rows: [
            { template:"Row 1"},
            { template:"Row 2"}
        ]
    });
> result {$ready: Array(1), _destructor_handler: {…}, config: {…}, _settings: {…}, _parent_cell: null, …}
  • we now observe the correct behavior

Summary:
webix integration guide instruction does not work, at least with the newest version.

METEOR@1.5.2.2
“webix@5.0.0”
“webix-meteor-data@0.1.0”

#2

Did you ever get this working? I’m also stuck and can’t get this to work.