getting devextreme dataGrid to work with webpack

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');