Slick.Grid is not a constructor

Question

I am using slickgrid on Symfony4

Symfony4 uses webpack system.

So my source code is like this ,

but it shows the error

Slick.Grid is not a constructor

Normally this error means it doesn't load the variable, however I can't figure out where is wrong.

in app.js

var $ = require('jquery');
require('bootstrap');
require('slickgrid');

console.log(Slick); // it shows in console `{Event: ƒ, EventData: ƒ, EventHandler: ƒ, Range: ƒ, NonDataRow: ƒ, …}`


$(document).ready(function() {

    var grid;
    var columns = [
      {id: "title", name: "Title", field: "title"},
      {id: "duration", name: "Duration", field: "duration"},
      {id: "%", name: "% Complete", field: "percentComplete"},
      {id: "start", name: "Start", field: "start"},
      {id: "finish", name: "Finish", field: "finish"},
      {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
    ];

    var options = {
      enableCellNavigation: true,
      enableColumnReorder: false
    };

      var data = [];
      for (var i = 0; i < 500; i++) {
        data[i] = {
          title: "Task " + i,
          duration: "5 days",
          percentComplete: Math.round(Math.random() * 100),
          start: "01/01/2009",
          finish: "01/05/2009",
          effortDriven: (i % 5 == 0)
        };
      }
      grid = new Slick.Grid("#myGrid", data, columns, options);

});

Answer 1

Slickgrid is a poorly written library, with bad behavior like relying on global variables, relying on the window object, and having side effects simply by loading the library.

Option 1

To use dangerously designed libraries like this in modern projects, you need to use modern forks of them. Use slickgrid-es6 instead.

Option 2

If you want to keep using the non-modern version in npm, it looks like you need to do:

require('slickgrid/slick.core.js')
require('slickgrid/slick.grid.js')

And then you'll have access to the global Slick and Slick.Core. This isn't recommended because the library follows bad practices, and despite being published to npm, doesn't follow any npm standards. It's especially scary this isn't documented at all in the npm package. It being update to date isn't related to this problem.

Option 3

Or if you prefer not to use build tools, you could simply include the SlickGrid script tag and use the global variable Slick and Slick.Grid.