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

1

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?

2

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

3

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?

4

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.

5

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: