Importing Webix into .js file: Can't find variable webix

Webix JS
#1

HI all. My first post. I’ve been playing with Webix Scheduler for awhile.

I’m trying to do the import * as webix from “@xbs/webix-pro” as described in the documentation. When I run it, I get notice that the variable ‘webix’ cannot be found.

I’m using Parcel JS to build a fully inlined version of my app; I’m using it in another platform, so it’s not web based. I need all the code in one file.

Not sure why I’m getting this ref error.

  1. I’m importing the index.js file into my html in the body.
  2. The index.js file contains the correct import statements.
  3. I can see all the type-ahead properties of webix.

Please help. I have no idea the problem.
Thanks

#2

Hello @Jeremy_Brown,

All of our complex widgets require for the webix variable to be available in the global context. This means that if you are planning on using imports, you will need to define that variable in some way.

Generally speaking, there are 2 main ways in which you can include the required sources:

1. Include the required dependencies via the script tag on some page (e.g., index.html), for example:

<link rel="stylesheet" href="codebase/webix/webix.css" type="text/css" charset="utf-8">
<script src="codebase/webix/webix.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="codebase/scheduler/scheduler.css" type="text/css" charset="utf-8">
<script src="codebase/scheduler/scheduler.js" type="text/javascript" charset="utf-8"></script>

The paths used above are provided as an example - in your case, they will need to point to the folder with the required sources. It is also possible to install the dependencies via NPM and use paths from node_modules. For instance:

<link rel="stylesheet" href="node_modules/@xbs/webix-pro/webix.css" type="text/css" charset="utf-8">
<script src="node_modules/@xbs/webix-pro/webix/webix.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="node_modules/@xbs/scheduler/codebase/scheduler.css" type="text/css" charset="utf-8">
<script src="node_modules/@xbs/scheduler/codebase/scheduler.js" type="text/javascript" charset="utf-8"></script>

2. Import the required dependencies. Please note that this approach requires for the webix variable to be defined in the global scope (as I’ve mentioned above) - this facilitates the following:

1) A basic (yet a bit rough) solution is to manually assign webix to a global variable, then use webix.ui() to init the necessary complex widget (in this case, Scheduler). For example:

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

webix.ready(() => {
  require("@xbs/scheduler");
  this.ui = webix.ui({
    view: "scheduler",
    ...
  });
});

2) In some cases, it is possible to use external tools like the ProvidePlugin for Webpack, which makes webix available for all includes (including Scheduler and other complex widgets). For example, you can add the next section in webpack.config.js:

plugins: [
  new webpack.ProvidePlugin({
  // SET PATH TO WEBIX HERE
  webix: path.join(__dirname, "node_modules", "@xbs", "webix-pro") // or wherever else it is located
}),

3) Or you can simply include just the core library as a global script and import only the complex widgets.

I would also like to note that, normally, we recommend including the core Webix library as a global script (through the script tag), as it is fairly large. The library will work faster due to caching, and your dev. toolchain will work faster as well (it will also make it easier to work with complex widgets due to the presence of the global webix variable). So, if possible, you should consider including everything through the script tag, or just the core library and import the rest.

Do you have a CDN that I could link in my HTML if the import can’t do what I need?

While we do have CDN links available for the GPL version of the library, we do not provide CDN links for the Pro version of the core library (and the related complex widgets). We do actually host the Pro version on our CDN, but it is used exclusively for our website/internal tools, and it is not meant to be used outside our main domain.

If you require some sort of CDN, you can host the sources on your own private CDN (in case you have one), or distribute them via another private CDN provider. Alternatively, you could also host them separately, without resorting to CDNs specifically (i.e. host sources using a remote server).

1 Like
#3

Thank you @Dzmitry.
I’ll see what I can do to get it to work.

Thanks

1 Like