"the name "turbo-frame" has already been used with this registry"

[noelrappin]

Using Turbo in a Rails app, latest beta of turbo-rails and webpacker.

On adding a second pack to my application and referencing it via javascript_packs_with_chunks_tag, I got the following error in console, even though the second pack does not load turbo-rails. Removing the second pack reference removes the error.

This happens even if the second pack file is empty.

turbo.es2017-esm.js:972 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry
    at Module../node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js (http://localhost:3000/packs/js/vendors-node_modules_hotwired_turbo-rails_app_javascript_turbo_index_js-node_modules_rails_ac-6427f6-8c418a3023a3470c3aaa.js:1093:16)
    at __webpack_require__ (http://localhost:3000/packs/js/runtime-32da56f579b6ef57e935.js:22:42)
    at Module../node_modules/@hotwired/turbo-rails/app/javascript/turbo/cable_stream_source_element.js (http://localhost:3000/packs/js/vendors-node_modules_hotwired_turbo-rails_app_javascript_turbo_index_js-node_modules_rails_ac-6427f6-8c418a3023a3470c3aaa.js:44:73)
    at __webpack_require__ (http://localhost:3000/packs/js/runtime-32da56f579b6ef57e935.js:22:42)
    at Module../node_modules/@hotwired/turbo-rails/app/javascript/turbo/index.js (http://localhost:3000/packs/js/vendors-node_modules_hotwired_turbo-rails_app_javascript_turbo_index_js-node_modules_rails_ac-6427f6-8c418a3023a3470c3aaa.js:89:86)
    at __webpack_require__ (http://localhost:3000/packs/js/runtime-32da56f579b6ef57e935.js:22:42)
    at Module../app/javascript/packs/application.js (http://localhost:3000/packs/js/application-e8d5a44878477c186c95.js:224:79)
    at __webpack_require__ (http://localhost:3000/packs/js/runtime-32da56f579b6ef57e935.js:22:42)
    at checkDeferredModulesImpl (http://localhost:3000/packs/js/runtime-32da56f579b6ef57e935.js:273:24)
    at Function.__webpack_require__.x (http://localhost:3000/packs/js/runtime-32da56f579b6ef57e935.js:286:69)

[wout]

I'm getting the same error when switching between layouts. I have one admin layout, covering the app itself. And another layout called auth, for the sign up and authentication flow. Navigating between them (e.g. logging in/logging out/adding another account), throws the error above.

A fix is to mark the links and forms which cause the switch of layout with data-turbo="false". But that's not always desirable.

[dhh]

This happens when Turbo is being loaded twice. Are you sure you didn't also include the turbo_include_tags call? That call is not to be used if you're using webpack.

[wout]

@dhh In the meantime I found the issue. I forgot to change data-turbolinks-track to data-turbo-track on the javascript_pack_tag. So after switching layouts, the new pack got loaded, causing the error. Now everything is working as expected.

[noelrappin]

I don't think that's my issue, but I could be wrong. I don't think I have turbo_include_tags, either.

I have this

<%= javascript_packs_with_chunks_tag 'application', 'data-turbo-track': 'reload' %>
<%= javascript_packs_with_chunks_tag 'venue_display', 'data-turbo-track': 'reload' %>

The error comes loading the second pack, take away the second line it's fine. I even get the error if the second pack is empty.

I'm fully prepared to believe that I'm missing something obvious... Or that it's a webpacker issue?

[alexnj]

Turbo doesn't seem to protect its core from loading twice. I ran into this issue just now with Webpack and extracting a common bundle, which was being loaded twice on navigation, resulting in this error. For now I've worked around by wrapping the Turbo loader like:

if (!window.__appClientLoaded) {
  window.__appClientLoaded = true;

  require('@hotwired/turbo');
}

Turbo is calling core.start() right on import. IIRC, TurboLinks had these two separated, i.e., I could import the bundle, but start Turbo at a later point. I'm curious why these were merged.

[AltanS]

So for me this was caused because I wasn't loading the JS that imported @hotwired/turbo in the <head> of the HTML. Per the turbo hotwire docs, it has to be loaded in the because every JS in the footer might be reloaded when navigating (https://turbo.hotwire.dev/handbook/building#loading-your-applications-javascript-bundle) the page, which causes the bug.

[donnysim]

This also happens when you receive a 404 page that does not contain the js scripts and then you hit browser back button. Using with laravel.

[darrynten]

I encountered this error because I'm using import instead of require in my app

My solution was a factory function that tracks and returns a single instance of Turbo it loads via require.

- import Turbo from '@hotwired/turbo'
- 
- Turbo.start()

+ export const getTurbo = async () => {
+   if (!window.Turbo) {
+     const Turbo = require('@hotwired/turbo')
+     await Turbo.start()
+     window.Turbo = Turbo
+   }
+
+   return window.Turbo
+ }

Using window above is just for simplicity sake, you should track it in a manner that suits your particular paradigm.

[AhmedNadar]

I had same issue for few days.

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry

    at http://localhost:5000/assets/turbo.debug-071ca217d766aca25c9a708d17c6f725fc81502d5cdd7a754127e4f11bce55d1.js:1289:16

When I checked if I have more than one turbo-rails, surprisingly I had 4 versions :

gem uninstall turbo-rails

Select gem to uninstall:
 1. turbo-rails-0.5.3
 2. turbo-rails-0.5.7
 3. turbo-rails-0.5.8
 4. turbo-rails-0.5.9
 5. All versions

Also for hotwire-rails, I had 3 versions.

gem uninstall hotwire-rails

Select gem to uninstall:
 1. hotwire-rails-0.1.2
 2. hotwire-rails-0.1.3
 3. All versions

I uninstalled all of them as well as stimulus-rails Then installed turbo and stimulus, and error has gone.
Hope this helps

[rromanchuk]

@alexnj i dont understand what the point of this export even is here

turbo/src/index.ts

Line 6 in f9d1651

import { start } from "./core"

which immediately calls

turbo/src/index.ts

Line 7 in f9d1651

start()

Calling .start() is essentially a NOOP which checks a boolean here

turbo/src/core/session.ts

Line 38 in f9d1651

start() {

And then if you look at import "@hotwired/turbo-rails", this looks pretty wrong to me

https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/index.js#L1

Which has this global define
https://github.com/hotwired/turbo-rails/blob/main/app/javascript/turbo/cable_stream_source_element.js#L27

customElements.define("turbo-cable-stream-source", TurboCableStreamSourceElement)

Is there anyway i can control the initialization that doesn't involve the absence of an import? I'm trying to avoid a separate entrypacks?

[Kukunin]

It seems like the latest webpakcer supports badly multiple packs tags on the layout: rails/webpacker#2932

So instead of having:

<%= javascript_packs_with_chunks_tag 'application', 'data-turbo-track': 'reload' %>
<%= javascript_packs_with_chunks_tag 'venue_display', 'data-turbo-track': 'reload' %>

It should be

<%= javascript_packs_with_chunks_tag 'application', 'venue_display', 'data-turbo-track': 'reload' %>

[dorianmariecom]

window.Turbo is already set by Turbo, so:

if (!window.Turbo) {
  require("@hotwired/turbo-rails")
}