`Turbo is not defined` when trying to call `Turbo.visit` about turbo-rails

[lasaldan]

@leonardoprg I have an app that I've migrated from using Turbolinks to using Turbo. Along the way, I was getting the same error as above (Turbo is not defined) when I tried to use Turbo functions in Stimulus controllers.

During the migration process I did a few find-and-replace commands from 'Turbolinks' to 'Turbo' and 'turbolinks' to 'turbo' and such. One of the replaces that I didn't pay attention to was in the application.js file, where //= require turbolinks became //=require turbo. As far as I can tell, this is what is causing the export { turbo_es2017Esm as Turbo, cable }; error (due to asset concatenation during asset compilation). Consequently, when a Turbo function was then used from Stimulus (or anywhere else for that matter), Turbo wasn't properly loaded and caused the Turbo is not defined error.

A Solution that worked for me

To get Turbo.js to be available in Stimulus and everywhere else, I added = turbo_include_tags to my application.html.slim layout.
I also removed the spurious //= require turbo from my application.js file

Side Effects

Though this causes an extra request to the server to fetch the Turbo.js file (since it's not in the asset pipeline compilation), it was worth it for me to move on from setting up Turbo, to actually using Turbo.

Hope this helps get you or a future reader past this issue.

[leonardoprg]

update:

After some research I found a possible solution:

- remove `<%= turbo_include_tags %>` from application.html.erb
- add `"turbo": "<%= asset_path('turbo')%>",` to `importmap.json.erb`

after that I can call
import { Turbo } from 'turbo'

but it presents some issues with turbo (especially after reload the page without importing turbo, turbo not working more)
which makes sense since Im not loading turbo in any stimulus controller on that page.

@dhh
are you guys aware of that?
is something on the roadmap to allow Turbo to be called inside stimulus controller without webpack?

Thanks

[leonardoprg]

thanks for the response @lasaldan
Im using the <%= turbo_include_tags %> on my application.html.erb and I dont have the //= require turbo on application.js

but this does not works yet :/

[lasaldan]

@leonardoprg Bummer!

As a temporary work around, (if you need Turbo available as a global variable) you could fork the repo and add window.Turbo = turbo_es2017Esm to the bottom of the turbo.js file.

Good luck friend.

[leonardoprg]

@lasaldan Yeah, I though about it,
but before would like to confirm that it is an issue and the guys are not working on a fix.

[dhh]

In the current setup, Turbo is not set on window by default. You're meant to use ESM to import Turbo in the controller where you need it. Using the importmap is the correct way to do this.

You need to still have turbo_include_tags in your head, then ALSO have it in your importmap, and then include it using your import in your controller. Did you find an issue when doing that?

[leonardoprg]

@dhh yes,
when using two imports. (in layout html and on stimulus controller) it raises:

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

removing the <%= turbo_include_tags %> works, but the other pages does not (since turbo is not being loaded).

[dhh]

Yes, I got to the bottom of this. It's because turbo is not being included as module-shim. I have released new gems for hotwire-rails and turbo-rails to fix this by default, but you have to manually fix it now by replacing turbo_include_tags with javascript_include_tag "turbo", type: "module-shim", and make sure that this is beneath the stimulus_include_tags call.

As you've already found, you then also need to add "turbo": "<%= asset_path "turbo" >", to the top of your importmap.

Thanks for reporting ✌️

[leonardoprg]

@dhh Thanks for the answer, I will try it

Thanks mate 👌

[npezza93]

I'm still seeing the NotSupportedError: CustomElementRegistry.define: 'turbo-frame' has already been defined as a custom element error after upgrading. Perhaps this is just a me thing. @leonardoprg how about you?

[leonardoprg]

@npezza93 it worked for me

on application.html.erb I have:

<%= javascript_include_tag "turbo", type: "module-shim" %>
<%= stimulus_include_tags %>

my app/assets/javascript/importmap.json.erb:

{
  "imports": { 
    "turbo": "<%= asset_path('turbo')%>",
    <%= importmap_list_with_stimulus_from "app/assets/javascripts/controllers", "app/assets/javascripts/libraries" %>
  }
}

one of my stimulus controllers:

import { Controller } from "stimulus"
import { Turbo } from 'turbo'

export default class extends Controller {
   ....
}

[dhh]

You need to include the stimulus code, which sets up the module shim, before including the turbo code.

[khash]

The latest hotwire-rails gem (0.1.3) has the same issue (with all the changes suggested above done in a Rails 6 app). I had to add the stimulus-rails gem (0.2.3) so stimulus_include_tags can work, but still can't import Turbo into a controller. (with Webpack, it fails with cannot find turbo in asset controllers)

For context, all I needed was to run Turbo.visit in a controller.

UPDATE: Using import { Turbo } from '@hotwired/turbo-rails' worked for me with the above versioned gems (no need to update the import map and the rest of the config on this thread).

[zzeligg]

This issue was closed a while back, but the problem does still occur when config.assets.debug = true.

I set it to false and now I can import { Turbo } from "turbo" and use it in Stimulus controllers.

For context, my app runs Rails 6.1.3.2 without webpack(er). I instead use sprockets only (with importmaps).

[seanwmitchell]

I'm on rails (7.0.0.alpha2) with turbo-rails (0.8.1) and Ruby 3.0.1 and I got this error. I fixed it by removing //= require turbo from my js files in the assets pipeline and adding <%= turbo_include_tags %> to my html headers

[darkBuddha]

https://turbo.hotwired.dev/reference/drive#turbo.setprogressbardelay is a little concise... where exactly are these commands expected? I want to use setProgressBarDelay.