SortableJS not imported

[rohanc]

I recently upgraded from SlickGrid v2 to v5. I read the v4 migration guide and the v5 migration guide which note SortableJS as a dependency.

I use webpack v5 and babel and therefore the ESM style. To my surprise installing sortablejs using npm and importing was not sufficient.

import { SlickGrid } from 'slickgrid';
import { Sortable } from "sortablejs";
const options={
   enableColumnReorder: true, // default is true
};
const grid = new SlickGrid("#myGrid", dataview, columns, options);

This generates the following exception:

Sortable is not defined
ReferenceError: Sortable is not defined
at SlickGrid.initialize (webpack-internal:///./node_modules/slickgrid/dist/esm/index.js:6561:638)
at new SlickGrid (webpack-internal:///./node_modules/slickgrid/dist/esm/index.js:6550:10)

I'm surprised it didn't say "SlickGrid requires Sortable.js module to be loaded" as there seems to be code in initialize() to detect that.

You can avoid the error if you set enableColumnReorder: false, but I like that feature.

The solution was to add window.Sortable = Sortable before calling the SlickGrid constructor. Then I created a solution using imports-loader.

I imagine this could be solved by adding an import for sortablejs at the top of dist/esm/index.js or perhaps there's a better way of integrating SortableJS as an optional dependency. Perhaps at the least there should be a note in the v5 migration guide about this.

[ghiscoding]

I imagine this could be solved by adding an import for sortablejs at the top of dist/esm/index.js or perhaps there's a better way of integrating SortableJS as an optional dependency. Perhaps at the least there should be a note in the v5 migration guide about this.

It's not that easy, we have to support 3 target outputs (cjs, esm, iife) without breaking Controls/Plugins and keep them as standalone in the iife format and for that I created a custom esbuild plugin that removes all import. In other words, in the iife format, we use the Slick namespace and when the user loads a Control/Plugin what it does is to append it to the Slick namespace and if I don't remove all these import then the iife would have included everything which is not the intention... so none of the import will work, they are all removed.

SlickGrid/scripts/esbuild-plugins.mjs

Lines 1 to 15 in e215137

	/** esbuild plugin to remove any imports from iife build since we'll be using the Slick object on the window object */
	export const removeImportsPlugin = {
	name: 'remove-imports-plugin',
	setup(build) {
	build.onResolve({ filter: /.*/ }, (args) => {
	if (args.kind !== 'entry-point') {
	return { path: args.path + '.js', namespace: 'import-ns' }
	}
	});
	build.onLoad({ filter: /.*/, namespace: 'import-ns' }, () => ({
	contents: `// empty string, do nothing`,
	loader: 'js',
	}));
	}
	}

This in theory shouldn't matter much since that esbuild plugin is only meant to remove import for the IIFE build only but with esbuild I tried to mark SortableJS as an external dependency but that didn't work so good and was maybe conflicting with the custom plugin above. The thing is that I really have to make SortableJS as external because if I don't then it becomes part of the CJS/ESM bundle and we don't want that because that could become duplicate code if users also use import 'sortablejs' in their own code too... but again I had issues with external so...

I use webpack v5 and babel and therefore the ESM style. To my surprise installing sortablejs using npm and importing was not sufficient.

Yes because just importing it won't add it to the window object by itself, you have to do it yourself (unless you use <script> which does put it on the window object), so yes that is the correct way to deal with it. I thought I mentioned it but it turns out that I did mention it in my other SlickGrid libs but forgot to mention it here.

Anyway, that was a long reply but if you find a way to deal with everything I wrote then I would be open for a contribution but at this point I found the easiest is to do it the way you've done. I will update the v4 and 5 migrations. Remember that if you do make a contribution, all 3 build targets must still work as intended without affecting build size.

[ghiscoding]

I'm converting this into a Discussion since I don't think this will change but I don't necessarily want to close the issue, I just want to promote it to a Discussion