Webix 6 typescript import webix not defined

edited November 2018 in Technical questions

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

Comments

  • Hello,

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

  • 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.

  • 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'.
    
  • 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;
    
  • now when i run though i get an error in the top right:
    "Please open sample by http, not as file://"

    ??

  • edited February 1

    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 ).

  • 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?

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

    The logic check location href, so it can be triggered by Electron builds
    https://github.com/webix-hub/webix/blob/master/sources/views/debug.js#L47

    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.

  • 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;
  • 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

  • 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

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!