Uncaught DOMException: CustomElementRegistry.define: 'turbo-frame' has already been defined as a custom element

Hello,
I have implemented Turbo in our webpage, just by requiring Turbo in the main script:

import Turbo from "@hotwired/turbo";

Unfortunately I can’t include the script in so I am including it before end tag.

But for some reason I get error:

Uncaught DOMException: CustomElementRegistry.define: 'turbo-frame' has already been defined as a custom element

I haven’t changed anything on our site regarding Turbo.
Is there anything I need to do in order to get rid of this error?

Check your layout for turbo_include_tags. Make sure to either use that or the import Turbo…

Thank you for your reply, I have fixed it by moving scripts to header.

But now I am facing another issue.
After updating content in turbo-frame, the turbo:load event is not fired.
Is there some step I have missed when using turbo-frame to get the turbo:load event firing?

The turbo:load event only fires after a Turbo Drive visit.

If you want to initialize some behavior in response to new HTML appearing on the page, be it from a Turbo Drive or Turbo Frames navigation, or from a Turbo Streams response, the Hotwire approach is to use a Stimulus controller.

Add a data-controller attribute to the element you want to observe, then implement the connect() method in the corresponding controller to respond when it’s loaded into the document.

Thank you for your reply!
That was the solution I was looking for, I’ve started using Turbo today so I am not that familiar with it.
One downside of this approach is that it does not update the <head> information.
But I guess that is the intended behaviour rather than a bug.

Have a great day! :slight_smile: