Webix 6 typescript import webix not defined

aalameda · November 15, 2018, 7:35pm

I upgraded to webix 6.0.5, and am using typescript and electron. using legacy import syntax, i now get webix is not defined at runtime:

import "webix"

i read through other forum posts, and other people are having the same problem. the suggested solution was to put:
import * as webix from "webix"

this does not work: node_modules/webix/webix.d.ts is not a module.

the only way i can get webix is importing using <script /> in index.html and this is insufficient, as my unit tests need the global variable and operate without loading index.html

aalameda · November 19, 2018, 8:24pm

bump

Nastja · November 20, 2018, 8:28am

Hello,

Please check this discussion. It can help you to solve the problem

Nastja · November 20, 2018, 10:04am

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")
	}),

which will make webix available for all includes

Also, please beware, that 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 the single app.js.

aalameda · February 1, 2019, 2:20am

i attempted to upgrade again, hoping you guys had fixed this.

I tried using "webix": "6.1.5"

import * as webix from "webix";

when compiling, i get the following error:

ERROR in C:/Dev/Projects/Electron/x/client/node_modules/webix/types/webix.d.ts
ERROR in C:/Dev/Projects/Electron/x/client/node_modules/webix/types/webix.d.ts(4050,18):
TS2694: Namespace '"C:/Dev/Projects/Electron/x/client/node_modules/webix/types/webix".webix' has no exported member 'ui'.

aalameda · February 1, 2019, 2:38am

UPDATE: i got a little further, i had added a local webix typing in my src/typings folder to patch a definition that was previously broken, and for whatever reason this does not merge correctly into new typings. i removed this file and was able to compile and run using

import * as webix from "webix";
import "webix/webix.min.css";

(window as any).webix = webix;

aalameda · February 1, 2019, 2:41am

now when i run though i get an error in the top right:
"Please open sample by http, not as file://"

??

Nastja · February 1, 2019, 1:14pm

This warning appears when you open a page in the browser using a path from your file system ( something like file:///D:/apps/my_webix_test/example.html ). We added this warning because some features (dynamic loading, export, etc.) use ajax requests to get the needed resources either from local or remote resources.
This approach requires a local web-server, so the path to local samples could be declared as http://localhost/my_webix_test/example.html (assuming that the root of your webserver file system is D:/apps ).

aalameda · February 1, 2019, 6:58pm

as far as i know, i do not use any of the mentioned features, and i believe the message is being shown as a consequence of my implementation (running in an electron desktop app)

is there a way to suppress this warning?

maksim · February 4, 2019, 9:14am

a consequence of my implementation (running in an electron desktop app)

The logic check location href, so it can be triggered by Electron builds

github.com

webix-hub/webix/blob/master/sources/views/debug.js#L47


      
          			type:"debug",
          			text:error_text,
          			expire:-1
          		});
          
          		if (window.console){
          			var logger = window.console;
          			logger.log("Data loading error");
          			logger.log("Object:", owner);
          			logger.log("Response:", text);
          			if(xhttp) logger.log("XHTTP:", xhttp);
          		}
          	});
          
          	ready(function(){
          		var path = document.location.href;
          		if (path.indexOf("file:")===0){
          			message({
          				type:"error", 
          				text:"Please open sample by http,<br>not as file://",
          				expire:-1

You can use the production version webix.min.js instead of webix.js. Production version doesn’t have such check

Also, it possible to compile your version from the provided sources, where the views/debug.js will be excluded from the build.

aalameda · February 6, 2019, 7:16pm

if i am using the following syntax to import webix, how do i specify i want min.js?


import * as webix from "webix";
import "webix/webix.min.css";

(window as any).webix = webix;

aalameda · February 7, 2019, 8:44pm

i found that navigating to node_modules/webix/package.json and changing the line:
"main": "webix.js",
to
"main": "webix.min.js",

fixes the issue

I am sort of confused why the default behavior would be to reference the debug version of the code?

Is there a nicer workaround than editing your published node_module? Otherwise i will have to write a script into my CI build process that makes this change

maksim · February 8, 2019, 3:29pm

how do i specify i want min.js?

If you are importing webix.js , it will be processed by your toolchain ( webpack or similar ), which can be configured to minify the output.

Latest webpack in production mode minifies js output by default, so there is no need to use webix.min.js