getting devextreme dataGrid to work with webpack - npm

Question

I am just trying to get a simple demo app working using webpack and devextreme components. I built the app first without webpack and it all worked fine. I am now trying to refactor it to use webpack. I can't get the dataGrid page to work I am just getting a console error .dxDataGrid is not a function. If anyone can see where I have gone wrong any ideas would be great.
var $ = require('jquery');
var ko = require('knockout');
require('devextreme/integration/knockout');
require('devextreme/ui/data_grid');
require('devextreme/ui/form');
require('devextreme/ui/text_box');
require('devextreme/ui/button');
require('devextreme/ui/check_box');
require('devextreme/ui/popup');
var AspNetData = require('devextreme-aspnet-data/js/dx.aspnet.data');
$(function () {
var url = CONST_URL + 'Login/';
$("#userGrid").dxDataGrid({
showColumnLines: false,
showRowLines: true,
rowAlternationEnabled: true,
columnHidingEnabled: true,
showBorders: true,
dataSource: AspNetData.createStore({
key: "id",
loadUrl: url + "GetUsers",
insertUrl: url + "UpsertUser",
updateUrl: url + "UpsertUser",
deleteUrl: url + "DeleteUser"
}),
columnChooser: {
//enabled: true,
//mode: "select"
},
paging: {
pageSize: 5
},
pager: {
showPageSizeSelector: true,
//allowedPageSizes: [5, 10, 15],
showInfo: true
},
editing: {
allowUpdating: true,
mode: "form",
allowAdding: true,
allowDeleting: true
},
columns: [
{
dataField: "id",
caption: "User ID",
formItem: {
visible: false
},
hidingPriority: 1
},
{
dataField: "username",
caption: "Username",
validationRules: [{
type: "required",
message: "Username"
}, {
type: 'pattern',
pattern: /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/,
message: 'Please supply a valid email address.'
}],
formItem: {
visible: true
},
hidingPriority: 3
},
{
dataField: "password",
caption: "password",
mode: "password",
validationRules: [{
type: "required",
message: "Password",
}, {
type: "stringLength",
min: 8,
message: "Your password must have at least 8 characters."
}],
visible: false,
formItem: {
visible: true
}
},
{
dataField: "date_created",
caption: "Date Created",
formItem: {
visible: false
},
hidingPriority: 2
},
{
dataField: "is_locked",
caption: "User Locked Out",
hidingPriority: 0
}],
onEditorPreparing: function (e) {
if (e.dataField === "password") {
e.editorOptions.mode = 'password';
}
if (e.parentType === "dataRow" && e.dataField === "username") {
setTimeout(function () { $(e.editorElement).dxTextBox("focus") }, 100);
}
},
onToolbarPreparing: function (e) {
var dataGrid = e.component;
e.toolbarOptions.items.unshift({
location: "before",
template: function () {
return $("<div/>")
.append(
$("<h2 />")
.text("User List")
);
}
});
},
onEditingStart: function (e) {
isUpdateCanceled = false;
e.component.columnOption("date_created", "allowEditing", false);
e.component.columnOption("id", "allowEditing", false);
},
onInitNewRow: function (e) {
isUpdateCanceled = false;
e.component.columnOption("date_created", "allowEditing", false);
e.component.columnOption("id", "allowEditing", false);
e.component.columnOption("is_locked", "allowEditing", false);
},
onContentReady: function (e) {
var saveButton = $(".dx-button[aria-label='Save']");
if (saveButton.length > 0)
saveButton.click(function (event) {
console.log(e.component);
if (!isUpdateCanceled) {
upsert(e.component);
event.stopPropagation();
}
});
}
});
});

Answer 1

Devexpress team gave me the solution. I thought I would post it here in case anyone else has the same issue. I was missing the jquery intergration.
require('devextreme/integration/jquery');