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 2019

    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 2019

    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

  • hello,
    1. When I want to import '@xbs/spreadsheet/spreadsheet.js' I got the error ”webix is not defined“ too. then I add the next section in the webpack.config.js:
    plugins: [
    new webpack.ProvidePlugin({
    // SET PATH TO WEBIX HERE
    webix: path.join(__dirname, "node_modules", "@xbs", "webix-pro")
    })
    ],the problem is solved!

    2.But now, when I do unit test ,this problem is still happened.
    Error1: webix is not defined in ../spreadsheet.js
    Error2: node_modules\@xbs\webix-pro\webix.js Can't locate codebase

    By the way, I use react + enzyme + jest.

  • Hi @zzhang ,

    As far as I can see, this issue may be related to Jest.

    Unfortunately, as webpack.ProvidePlugin is recommended for correct Webix import, the alternative solution will be to use script loader for webix.js.
    Please add in webpack.config.js the following lines

    module.exports = {
        module: {
            rules: [
                {
                    test: /\@xbs\/webix-pro\/webix\.js$/,
                    use: [ 'script-loader' ]
                }
            ]
        }
    }
    

    it will use script-loader for webix.js, which will load webix.js as a global script, so it will be accessible to all the code ( it is the same as including script tag with webix.js inside of index.html ).

    In general, we recommend to include webix.js through script tag, as this file is relatively big and will work better as a separate script without bundling in a single app.js.

  • edited June 2019

    hi Listopad,
    Thanks for your reply.
    I have tried this way(use 'script-loader')
    rules: [ {
    test: /webix.js$/,
    use: [ 'script-loader' ] }
    ] }
    So both this way and webpack.ProvidePlugin are useful.by the way.which is better?

    But my problem is how to avoid this error when run test.(react + enzyme + jest.)

  • @zzhang according to our further research, it seems that Jest does not fetch the sources declared at webpack.ProvidePlugin.

    In order to continue using webpack.ProvidePlugin and Jest, you need to create a separate Webix provider for it.
    Please create the file config/jest/webixProvider.js with the following line (with the relevant path to Webix):

    window.webix = require(__dirname+"/../../src/webix/webix.js");
    

    After that, add your webixProvider into jest.setupFiles section at package.json:

      "jest": {
        ...
        "setupFiles": [
          "react-app-polyfill/jsdom",
          "<rootDir>/config/jest/webixProvider.js"
        ],
    

    If the will persist, please contact us via support@webix.com

Sign In or Register to comment.