Webix 6 and importing

I am using webix with webix jet. I used to import webix like this "import '@xbs/webix-pro';" After update to 6 I am getting error "webix is not defined".

I also tried to import webix like this "import * as webix from '@xbs/webix-pro';". But is also not working.

Comments

  • edited October 2018

    Starting from version 6.0 webix works as real module, it will not define global "webix" var while importing.

    You can use

    import * as webix from "@xbs/webix-pro";
    
    webix.ui({ template:"it works" });
    

    or import just the necessary methods

    import {ui} from "@xbs/webix-pro";
    
    ui({ template:"works as well" });
    

    and as last strategy, to fully restore the old behavior, you can use

    import * as webix from "@xbs/webix-pro";
    window.webix = webix; // make webix global again
    
  • As side note, it is recommended to include webix directly on the page through a script tag.
    The lib will work faster due caching, and your dev. toolchain will work faster as well.

  • I put

    import * as webix from "@xbs/webix-pro";
    window.webix = webix;

    in app.js and it is still not working. Webix jet still saying webix is not defined. Only thing that is work if I import from script tag. But I don't want that.

  • Some additional info. I am using webix jet with NPM and Webpack. Webix PRO version is installed through NPM.

  • edited November 2018

    I can confirm this problem. Although webix doesn't need the global, jet(1.6.2) does rely on the global to load. As babel-loader will put all import statements ahead, "window.webix = webix; " can't help with jet.

  • So is there any solution?

  • bump, i also have this problem. when using import * as webix from "webix" i get the following during compilation: node_modules/webix/webix.d.ts' is not a module.

    the only way i can get webix is importing using <script /> and this is insufficient, as my unit tests need the global variable

  • The oncoming Webix Jet 2.0 ( November 22 ) will work correctly with importing webix.js ( using without a global var )

    For now, you can update webix jet to version "1.6.3-m". This is patched version of the latest webix jet which must allow using it like

        import * as webix from "webix";
        import {JetApp, EmptyRouter, HashRouter } from "webix-jet";
    
        window.webix = webix;
    

    or in a more pure way

        import * as webix from "webix";
        import {JetApp, EmptyRouter, HashRouter } from "webix-jet";
    
        export default class MyApp extends JetApp{
            constructor(config){
                super({
                    webix, // the webix instance
                    id:"myapp",
                    start:"/top" });
            }
        }
    

    as for d.ts, here is the version "for import like a module"
    https://files.webix.com/30d/60a1aaef8c88612d234a97b1404fa3c5/webix.module.d.ts

  • Also, can you share the benefits which you have by using webix as a module?

    As far as I can see, such setup

    • slowdown toolchain ( as webix files are processed by webpack )
    • produces a big app bungle instead of caching the mostly static webix.js
  • edited November 2018

    Well, I use this mostly for convenience of distribution. My webpack config will first clean the dist folder and then pack everything into it. Using webix as a module:
    * It dose slowdown toolchain a little, but acceptable.
    * In my webpack config, webix is seperated using splitChunks. So no big app bundle. Webpack just rebuild the webix library. And before webix 6.0, the build-in font-awesome is also packed by webpack automatically.

    In fact, as I don't use cdn version webix, I don't know how to gracefully include webix in script tag .
    * Use /node_modules/webix/ ? I don't want to expose the node_modules path. And the npm version webix just doesn't work in script tag. I have to use webix zipfile in the download link.
    * OR copy webix files to dist folder in webpack config? It's not convenient.

  • Hey @zzm3145 are you using react?

  • @maksim What is happening with Webix Jet 2.0? When will be available?

  • Hello,
    I am using Webix in my React Project and included webix through NPM. After update, webix module is not working and throwing the above error as 'can't found: webix'.

    I tried the following methods but still not working,
    import webix from 'webix/webix.min.js';
    import * as webix from "webix";

    Webix version: 6.1.4

    Any other solution?

  • edited January 11

    Yep, I can confirm that the GPL npm package for 6.1.4 is corrupt, but we will publish the functional version as soon as possible. For now you can download the 6.1.4 GPL from Webix site.

    Upd: Webix 6.1.5 GPL is already available with the mentioned package bug fixed.

  • Now it works in Jet2.0 + webix 6.1.5
    1. import * as webix from 'webix';
    2. In JetApp constructor, set config.webix = webix

    Anthoer tip that may help others:
    Jet in npm use ES6 format in 'module' and ES5 format in 'main'. You should set babel accordingly otherwise you will see a undefinced constructor error.

Sign In or Register to comment.