search

filamentgroup / tablesaw

A group of plugins for responsive tables.
MIT License
5.48k stars 434 forks source link

Shoestring, jQuery, Webpacker expose-loader, mayhem... #392

Closed brendon closed 2 years ago

brendon commented 3 years ago

Here's a note for any other lonely sucker who comes across this one.

Symptoms: expose-loader doesn't seem to be exposing $ or jQuery into the window with Webpack. You get errors about non-existing methods on $ but somethings miraculously seem to work. You do a quick console.log($('a')) and get these weird Shoestring objects back but googling that brings up things about actual shoes. Even googling 'shoestring jQuery' comes up short. You assume this is some in-built browser compatibility layer you haven't learned about yet. expose-loader (if you use the string method) warns you that $ exists already on window and says you can override this but you're suspicious.

You waste several hours troubleshooting this and finally get your break when you decide to search your compiled javascript for the word 'shoestring' and notice it's coming up in your Webpack output. You check your yarn.lock file and there it is! shoestring is a dependency of tablesaw!

Now I'm still not sure how import Tablesaw from 'tablesaw/dist/stackonly/tablesaw.stackonly' manages to pollute the window object, but I guess since you can access the window from within a Webpack build at runtime, you can also pollute it if you're not responsible. Actually here it is: https://github.com/filamentgroup/tablesaw/blob/6c3387b71d659773e1c7dcb5d7aa5bcb83f53932/dist/stackonly/tablesaw.stackonly.js#L349

So anyway, you dive into node_modules/tablesaw and see there's a version with a jQuery extension:

import Tablesaw from 'tablesaw/dist/stackonly/tablesaw.stackonly.jquery'

Whala! All your problems go away :)

I think I'm trying to say that tablesaw shouldn't pollute the global namespace, and definitely shouldn't overwrite window.$! What do you think?

nkutsche commented 3 years ago

Thanks man! You have mastered the journey on which I was just up to. And a note from myself: from a library with sufix jquery in the name, I expect that jquery is embedded here. At least in the most librarys I saw, that was the meaning. jquery-compatible or for-jquery would be more helpful I think.

brendon commented 3 years ago

I'm so glad this also helped you! :D