Cannot find Sortable dependency in SlickGrid: "Uncaught (in promise) ReferenceError: Sortable is not defined" when run with Vite

Question

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.

awnine · Accepted Answer · 2025-02-07 13:44:26Z

0

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.

answered Feb 7 at 13:44

awnine

1632 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ghiscoding Feb 7 at 14:46

Just do (window as any).Sortable = Sortable;, and remove the interface, it's not needed at all and bad as you mentioned. Also, FYI I did had notes about Sortable a while ago in the Migration v5 Wiki, it's nothing new. I also created the Vite demo has pure JS to cover more users. Note that there was also this SlickGrid + Svelte question asked in the past too stackoverflow.com/questions/78011468/…

awnine Feb 7 at 15:08

Thanks for the typing suggestion. I ended up installing the type declaration for Sortable and then could type the class.

Collectives™ on Stack Overflow

Cannot find Sortable dependency in SlickGrid: "Uncaught (in promise) ReferenceError: Sortable is not defined" when run with Vite

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related