Loading plugins individually with webpack(er)?

[jrochkind]

I am using tom-select via npm and Webpack -- actually with Rails webpacker.

This works swimingly, if I do something like:

 import TomSelect from 'tom-select/dist/js/tom-select.complete.js';
 new TomSelect(whatever, {});

Great!

Or, of course, I can load tom-select.popular or tom-select.base instead.

But wouldn't it be nice if there were a way to load base, and then import specific plugins individually to include them, all in webpacker via npm source, without having to make a custom build via source and grunt?

Maybe there is, and I'm missing it -- I am very far from an expert or even very comfortable with webpack(er) at this point -- but I don't think so.

If I try, say,

import TomSelect from 'tom-select/dist/js/tom-select.base.js';
import 'tom-select/dist/js/plugins/remove_button';

I didn't really expect that to work anyway -- the second import wouldn't necessarily interact with the first one to actually add the plugin, because of how webpack works (I sort of kind of think/understand).

But also it produces an error on webpack compilation, that I don't understand at all:

ERROR in ./node_modules/tom-select/dist/js/plugins/remove_button.js
Module not found: Error: Can't resolve '../../tom-select.ts' in '/Users/jrochkind/code/scihist_digicoll/node_modules/tom-select/dist/js/plugins'

I think the JS in the npm package would have to be changed/refactored somehow to make this possible, to make it possible to import specific plugins at webpack compilation time from npm source. So I think this is a feature request. I don't really understand JS and what's going on well enough to say exactly how it could/should be done.

Any thoughts?

[jrochkind]

OK, I figured it out... only cause I started randomly reading closed Issues in this project, and found this one:

#57

So this works!

import TomSelect from 'tom-select/dist/esm/tom-select'; // base
import 'tom-select/dist/esm/plugins/remove_button/plugin'; 

/dist/esm, not ./dist/js. I honestly don't know how I would have figured this out if I hadn't found the exact example. I don't know what esm stands for or how it differs from ./dist/js. . I generally don't understand how I am supposed to figure out the right way/place to import from any npm packages, not just this one, I feel lost every time!

So there could be some things I am just missing here.

But I wonder if there should be docs on how to import in this environment (which I think is not just limited to webpack? I don't even know what to call this style/kind of environment!) somewhere, including the base/plugins example?

[oyejorge]

Yep, that's it. Here's a little background on the different ways of importing/requiring js

... and an example of ESM usage on tom-select.js.org

[jrochkind]

Thanks!

Do you think it would make sense to have an ESM example documented somewhere for importing base and selected plugins? Since I'm at least the second person to get stuck by it.

Thanks for tom-select!

[jrochkind]

Oh wait, i see you edited to link to an example...

I would have to know to click on "ESM example", ok, that's on me... but once I do, I have to figure out to convert import TomSelect from '/esm/tom-select.js'; to the npm/webpack version that begins tom-select/dist/esm..., but maybe that's on me too.

Maybe JS is just confusing these days, fair enough!

[ryanb]

@jrochkind @oyejorge it appears the esm files include all dependencies, so we're importing all of TomSelect when importing each plugin file. Do you find that to be the case?

[ryanb]

I am running into this too and posted another suggestion here: #222

[jrochkind]

Rats, I hadn't noticed, but I believe you. (It's a bit tricky for me to even figure out to confirm/deny, honestly).

That would kind of defeat the purpose of the plugins. Would love to see that fixed.

[ryanb]

@jrochkind My PR #223 was merged which changes how this works. The esm plugin won't be enough since it no longer calls TomSelect.define. See that PR for details.