I'm working on turning an old PHP+smarty+jquery+jqwidgets web application (html/css/JS all combined in single smarty template files) to have a more modern front-end. I'm trying to use webpack to put together all of my front-end assets into bundles, but I can't get jqwidgets to work properly in this setup. I'm not using react or any other front end libraries, just the jquery and jqwidgets but trying to load them all through webpack.
I've set up jquery and fancybox, and they both work correctly through the webpack setup. I'm not able to get jqwidgets to work correctly no matter how I set up my webpack.config.js file, or the source javascript file.
When I run npx webpack, it will compile the javascript correctly, including the jqx-all.js but when I go to run the code it can't find $.jqx.
const path = require("path");
const webpack = require("webpack");
const isProduction = process.env.NODE_ENV == "production";
const config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
},
plugins: [
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
new webpack.ProvidePlugin({
$: 'jquery',
jqwidgets: 'jqwidgets-framework/jqwidgets',
jqxtabs: 'jqwidgets-framework/jqwidgets/jqxtabs',
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
resolve: {
alias: {
jqx : "jqwidgets-framework/jqwidgets",
$ : "jquery",
jqxTabs : "jqwidgets-framework/jqwidgets/jqxtabs"
}
}
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
} else {
config.mode = "development";
}
return config;
};
and the index.js file
import 'jquery';
import 'jqwidgets-framework/jqwidgets';
$(document).ready(function () {
$('#dashboardTabs').jqxTabs({ width: '100%', position: 'top', autoHeight: 'true', animationType: 'fade' });
});
and the html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack App</title>
</head>
<body>
<script src='dist/main.js'></script>
<h1>Hello world!</h1>
<h2>Tip: Check your console</h2>
<div id='dashboardTabs'>
<ul>
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div>1</div>
<div>2</div>
</div>
</body>
</html>