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.

  • edited May 13

    Hello,

    Before Webix 6.0 (webix 5.7 webix jet 1.0), anlike zzm3145, I'was used to have two entries in webpack.config (the main app.js and an array of the path to licensed libraries as webix pro) in order to obtain two separated js files (and css too). In this way, my index.html could keep having two script entries (as Webix support recommends), one for licensed libraries and one for the webix-jet app.

    Now I'm trying to update webpack.config.js and package.json to use webpack 4 and the last releases of webix and jet. However, although I obtain the code splitted into two js files, I get the error in js console "Can't find variable: webix".

    Can you help me, please?

    This is my webpack.config.js:

    var path = require("path");
    var webpack = require("webpack");
    
    module.exports = function(env) {
    
        var pack = require("./package.json");
        var MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
        var production = !!(env && env.production === "true");
        var asmodule = !!(env && env.module === "true");
        var standalone = !!(env && env.standalone === "true");
    
        var babelSettings = {
            extends: path.join(__dirname, '/.babelrc')
        };
    
        //Vendors paths
        const vendors_path = path.resolve(__dirname,"./sources/external_libs/vendors/");
        //
        const vendors_paths = [
            path.join(vendors_path, "/webix/webix.min.js"),
            path.join(vendors_path, "/webix/skins/" + `${pack.skin}` + ".min.css"),
            //
            //path.join(vendors_path, "/webix-filemanager/filemanager.min.js"),
            //path.join(vendors_path, "/webix-filemanager/filemanager.min.css"),
        ];
    
        //Output path
        var publicPath = "/dist/";
        if (production) {
            publicPath = "../dist/";
        }
    
        var config = {
            mode: production ? "production" : "development",
            entry: {
                deps: vendors_paths,
                app: "./sources/app.js"
            },
            output: {
                path: path.join(__dirname, "dist"),
                publicPath: publicPath,
                filename: "[name].js",
                chunkFilename: "[name].bundle.js"
            },
            module: {
                rules: [
                    {
                        test: /\.js$/,
                        use: "babel-loader?" //+ JSON.stringify(babelSettings)
                    },
                    {
                        test: /\.(svg|png|jpg|gif)$/,
                        use: "url-loader?limit=25000&name=imgs/[name].[ext]"
                    },
                    {
                    test: /\.(svg|eot|ttf|woff|woff2)$/,
                    loader: 'file-loader',
                        options: {
                            name: "fonts/[name].[ext]",
                            //useRelativePath: process.env.NODE_ENV === "production"
                      }
                    },
                    {
                        test: /\.(less|css)$/,
                        use: [ MiniCssExtractPlugin.loader, "css-loader", "less-loader" ]
                    }
                ]
            },
            stats:"minimal",
            resolve: {
                extensions: [".js"],
                modules: ["./sources", "node_modules"],
                alias:{
                    "jet-views":path.resolve(__dirname, "sources/views"),
                    "jet-locales":path.resolve(__dirname, "sources/locales")
                }
            },
            plugins: [
                new MiniCssExtractPlugin({
                    filename:"[name].css"
                }),
                new webpack.DefinePlugin({
                    VERSION: `"${pack.version}"`,
                    APPNAME: `"${pack.name}"`,
                    PRODUCTION : production,
                    BUILD_AS_MODULE : (asmodule || standalone)
                })
            ],
            devServer:{
                stats:"errors-only",
                // proxy:{
                //  "/server" : "http://localhost:8888/webix-jet-start-php/"
                // }
            },
            // optimization: {
        //     splitChunks: {
        //         cacheGroups: {
        //             vendors: {
            //                              test: /[\\/]vendors[\\/]/,/// + vendors_path + /,
            //                              name: 'deps',
        //                 //chunks: 'all'
        //             },
            //                      default: {
            //                              test: /^([\\/]vendors[\\/])/,
        //                 name: 'app',
        //                 //chunks: 'all'
        //             },
        //         }
        //     }
        // }
        };
    
        if (!production){
            config.devtool = "inline-source-map";
        } else {
            config.devtool = "source-map";
        }
    
        if (asmodule){
            if (!standalone){
                config.externals = config.externals || {};
                config.externals = [ "webix-jet" ];
            }
    
            const out = config.output;
            out.library = pack.name.replace(/[^a-z0-9]/gi, "");
            out.libraryTarget= "umd";
        }
    
        return config;
    }
    
  • Please check https://github.com/webix-hub/jet-start/tree/import-bundle

    It uses the latest webix and webpack for the same result.

    webpack config has a separate entry for webix core and uses script-loader ( babel is disabled for webix file to improve build time )
    https://github.com/webix-hub/jet-start/commit/acacfffe6ea2d15b4e709a2870918ae88761bf14#diff-11e9f7f953edc64ba14b0cc350ae7b9dR20

Sign In or Register to comment.