Storybook is firing DOMContentLoaded twice on hard refresh

Describe the bug Also seems to be happening on hot reload too.

To Reproduce

    window.addEventListener('DOMContentLoaded', () => {
      console.log('fired')
    });

Then refresh the page using F5.

This is due to storybook simulating page reload for hot-reload changes here:

export function simulateDOMContentLoaded() {
  var DOMContentLoadedEvent = document.createEvent('Event');
  DOMContentLoadedEvent.initEvent('DOMContentLoaded', true, true);
  document.dispatchEvent(DOMContentLoadedEvent);
}

However it should not fire the above function on a hard refresh of the page because the browser fires it automatically.

Here’s current workaround:

preview.js

let domContentAlreadyLoaded = false;

document.addEventListener('DOMContentLoaded', (e) => {
  if (domContentAlreadyLoaded) {
    e.stopPropagation();
  }

  domContentAlreadyLoaded = true;
});

Hot reload doesn’t work but it’s better than bugs.

[LucaPipolo]

Another, perhaps cleaner, temporarily fix might be to pass { once: true } as option of addEventListener(). See MDN for more info about this parameter.

So it will be ⬇️

document.addEventListener('DOMContentLoaded', () => {
  // Your code...
}, { once: true });

[vascoeduardo]

Hi everyone, as i encountered the same problem with the DOMContentLoaded event being fired twice, i tried your suggested workarounds. unfortunately they didn’t worked form and I had to find another workaround to fit my needs.

In my solution I basically just check from which srcElement the DOMContentLoaded is fired an store the URL in a variable. If the event is fired again, I check if it is the same URL to decide if the event should be ignored.

let eventSrcUrl = null;

document.addEventListener('DOMContentLoaded', function (event) {
    console.log('DOM fully loaded and parsed') 
    if(eventSrcUrl != event.srcElement.URL) {
        eventSrcUrl = event.srcElement.URL
        console.log('Init JS features' )
        // init();
    } else {
        console.log("second DOMContentLoaded Event was blocked!");
    }   
})

With this implemented, my JS init script is only loaded 1 time. It works with “hard reload” and switching storys. Hope this helps