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.
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.
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
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:
In fact, as I don’t use cdn version webix, I don’t know how to gracefully include webix in script tag .
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?
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
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.
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 GitHub - webix-hub/jet-start at 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 )
hello,
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.