guybedford / es-module-shims

Shims for new ES modules features on top of the basic modules support in browsers
MIT License
1.52k stars 83 forks source link

Double imports #433

Open EdgeCaseLord opened 3 months ago

EdgeCaseLord commented 3 months ago

I'm using Ruby 3.2.2 and Rails 7.1 with TailwindCSS, ViewComponents, Hotwire Turbo and Stimulus. In order to get the app running on old Safari browsers, I included es-module-shims in the app layout as first import, before the Rails Importmap tag helper. This led to all my Stimulus JS controllers getting imported twice. This led to all eventHandlers being added twice, and all events firing twice, causing unexpected behaviour especially on toggle buttons.

Expected behaviour:

Faulty behaviour:

Steps to reproduce:

Solution:

My provided solution is merely a workaround, since I need the functionality that es-module-shims offers. I'll have to look for an alternative now.

guybedford commented 3 months ago

You might be incorrectly assuming that code is running twice here. Are you sure that the code is really double executing by adding a checking log or debugger statement?

Otherwise I would note that we do retrigger load events which was a feature we added specifically for Stimulus support in Rails apps.

This feature can be disabled by setting <script type="esms-options">{"noLoadEventRetriggers:" true}</script> you can read more here - https://github.com/guybedford/es-module-shims?tab=readme-ov-file#no-load-event-retriggers.

Try that out and see if it works.