I have been trying to get SlickGrid to work, first in a svelte application, and then in a Vanilla Javascript one for testing, both built with Vite and where Slickgrid is installed via npm.

Even though Sortable is a dependency of Slickgrid, and is installed when SlickGrid is installed (ie is present in the node modules), running a basic page in dev mode comes up with:

    Uncaught (in promise) ReferenceError: Sortable is not defined

I have tried also manually installing SortableJS but of course it is already installed, and makes no difference.

It happens with both Typescript and Javascript repos, and occurs in dev and built modes with Vite.

The process to reproduce is:

• create new Vite project, Vanilla Javascript
• npm install
• npm i slickgrid
• replace main.js with following code:

    import './style.css'
    import { SlickDataView, SlickGrid } from 'slickgrid'
    
    document.querySelector('#app').innerHTML = `
      <div id="myGrid">
      </div>
    `
    
    const dataView = new SlickDataView({ inlineFilters: true });
    const columns = [
      {
          name: "Address",
          field: "address",
          id: "address",  // In most cases field and id will have the same value.
          sortable: true
      }, 
      {
          name: "Rating, in %",
          field: "rating", // This and the following column read the same data, but can present it in a different way.
          id: "rating_percent",
          resizable: false
      }, 
      {
          name: "Rating, in stars",
          field: "rating",
          id: "rating_stars"
      }
    ];
    const options = {}
    const grid = new SlickGrid("#myGrid", dataView, columns, options);

• run the dev script and check browser console.

I have been trying to get SlickGrid to work, first in a svelte application, and then in a Vanilla Javascript one for testing, both built with Vite and where Slickgrid is installed via npm.

Even though Sortable is a dependency of Slickgrid, and is installed when SlickGrid is installed (ie is present in the node modules), running a basic page in dev mode comes up with:

    Uncaught (in promise) ReferenceError: Sortable is not defined

I have tried also manually installing SortableJS but of course it is already installed, and makes no difference.

It happens with both Typescript and Javascript repos, and occurs in dev and built modes with Vite.

The process to reproduce is:

• create new Vite project, Vanilla Javascript
• npm install
• npm i slickgrid
• replace main.js with following code:

    import './style.css'
    import { SlickDataView, SlickGrid } from 'slickgrid'
    
    document.querySelector('#app').innerHTML = `
      <div id="myGrid">
      </div>
    `
    
    const dataView = new SlickDataView({ inlineFilters: true });
    const columns = [
      {
          name: "Address",
          field: "address",
          id: "address",  // In most cases field and id will have the same value.
          sortable: true
      }, 
      {
          name: "Rating, in %",
          field: "rating", // This and the following column read the same data, but can present it in a different way.
          id: "rating_percent",
          resizable: false
      }, 
      {
          name: "Rating, in stars",
          field: "rating",
          id: "rating_stars"
      }
    ];
    const options = {}
    const grid = new SlickGrid("#myGrid", dataView, columns, options);

• run the dev script and check browser console.

• vite
• slickgrid
• sortablejs

1 Answer 1

This issue was caused by the Sortable object not being available on the Window, as it would be if imported in another way. By looking at the Vite example project here I found this line in main.js:

// assign SortableJS to the Window object
window.Sortable = Sortable;

Additionally, when running this in a Svelte project with Typescript there were a couple of other steps when making the SlickGrid into a component:

• the assignment to the Window needs to occur inside an onMount callback, as explained here:

   onMount(() => {
       window.Sortable = Sortable;
       // ...
  

• altering the window object will confuse Typescript, and so the sortable property needs to be added to the Window type (as mentioned in this post). The place that worked for me to do this was in the app.d.ts file inside src, with this code in the existing declare global object:

   declare global {
       namespace App {
           // interface Error {}
           // interface Locals {}
           // interface PageData {}
           // interface PageState {}
           // interface Platform {}
       }
  
       interface Window {
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
           Sortable: any;
       }
   }
  

NOTE - typing Sortable as any isnt ideal but there may be another way getting the type declaration file for the library.