Bundle Webix-Jet 3+ with Webpack

Webix JS
1

Has anyone been able to successfully bundle Webix-Jet 3.0.0+ with Webpack 5? I can bundle my app without any issues with Webix-Jet 2.1.3.

Webpack-Dev-Server will start but running the app in a browser results with this error.

(“reference error: require is not defined” in jet.mjs)

Best Regards,
Johnny Harris

2

I copied the jet-start/webpack.config.js from the GitHub repo and I’m still getting:

ReferenceError: require is not defined
require jet.mjs:698
loadView jet.mjs:483
createFromURL jet.mjs:498
u jet.mjs:560
promise callbackrender jet.mjs:560
js portal.js:41
yi ready.js:40
$/< helpers.js:125
setTimeout handler$ helpers.js:123
ready.js:48
callEvent eventsystem.js:56
I customevents.js:7
xi ready.js:29
Ot htmlevents.js:42
ready.js:52
webix.min.js:9
webix.min.js:9
jet.mjs:547

Below 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 HtmlWebpackPlugin = require('html-webpack-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')
};

var config = {
	mode: production ? "production" : "development",
	entry: {
		myapp: "./sources/portal.js",
		login: "./sources/views/login.js"
	},
	output: {
		path: path.join(__dirname, "./public/bundles"),
		publicPath:"/",
		filename: "[name].js",
		chunkFilename: "[name].bundle.js",
		clean: {
			keep: /public\//, 
		}
	},
	module: {
		rules: [
			{
				test: /\.(js)$/,
				exclude: /webix\.(min\.|)js$/,
				use: "babel-loader?" + JSON.stringify(babelSettings)
			},
			{
				test: /webix\.(min\.|)js$/,
				use: "script-loader"
			},
			{
				test: /\.(svg|png|jpg|gif)$/,
				use: "url-loader?limit=25000"
			},
			{
				test: /\.(less|css)$/,
				use: [ MiniCssExtractPlugin.loader, "css-loader", "less-loader" ]
			}
		]
	},
	stats:"minimal",
	resolve: {
		extensions: [".js"],
		modules: ["./sources", "node_modules"],
		alias:{
			"webix":path.resolve(__dirname, "node_modules", "webix", "webix.min.js"),
			"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)
		}),
	  new HtmlWebpackPlugin({ title: 'Employee Portal', template: 'template.html' }),
	],
	//devtool: "inline-source-map",
devServer: {
    	  open: true,
    	  hot: true,
    	  static: './public',
    		host: '192.168.2.50',
        port: '5555',
        headers: {
    			'Access-Control-Allow-Origin': '*'
        },
        proxy: [{
        		context: ['/api/*'],
        		target: 'http://192.168.2.50:8001',
        		changeOrigin: true,
        		secure: false
        	},
         	{
        		context: ['/auth'],
        		target: 'http://192.168.2.50:8001',
        		changeOrigin: true,
        		secure: false
        	},
        	{
        		context: ['/unlock/*'],
        		target: 'http://192.168.2.50:8001',
        		changeOrigin: true,
        		secure: false
        	}]
},
};

if (!production){
	config.devtool = "inline-source-map";
}

if (asmodule){
	if (!standalone){
		config.externals = config.externals || {};
		config.externals = [ "webix-jet" ];
	}

	const out = config.output;
	const sub = standalone ? "full" : "module";

	out.library = pack.name.replace(/[^a-z0-9]/gi, "");
	out.libraryTarget= "umd";
	out.path = path.join(__dirname, "dist", sub);
	out.publicPath = "/dist/"+sub+"/";
}

return config;

}

3

Unfortunately, it is a known issue. The updated Jet toolchain may not work well (or, as in this case, not work at all) with certain Webpack configs. We plan to update the related jet-start branch in the near future. However, for the time being, we recommend the following:

  1. Use webix-jet 2.1.7 (latest pre-3.0 version) if you are planning to work with Webpack.

  2. Or, consider migrating to Vite for your app’s toolchain if you want to use the latest version of webix-jet (3.0+). See the related Vite-based jet-start demo to get started.

In “jet-start” (and in our older demos), Webpack is configured to build sources compatible with older browsers. Jet 3.0+ was built with Vite for more modern browsers, and this can cause conflicts.
In theory it is possible to instruct Webpack to run Jet sources through Babel so that it will be compatible with your current build settings
Another option (probably will be implemented in our demos) is to reconfigure project’s build for modern browsers.

4

I will use version 2.1.7 for now and look at moving to Vite in the near future.

Thank you for the information.