Search code examples
ruby-on-railsruby-on-rails-6turbolinkswebpacker

Turbo.visit('/') not working with Webpacker in Rails 6.1.3


I am setting up Turbo in a Rails 6.1.3 app with webpacker. Seems it is running as it should, except for one issue. I can't reference it in my js files:

// app/javascript/javascripts/shared.js

Turbo.visit('/');

raises an error in my console:

Uncaught ReferenceError: Turbo is not defined
    at HTMLDocument.<anonymous> (shared.js:4)
    at HTMLDocument.dispatch (jquery.js:4670)
    at HTMLDocument.elemData.handle (jquery.js:4490)
    at dispatch (turbo.es2017-esm.js:387)
    at Session.notifyApplicationAfterPageLoad (turbo.es2017-esm.js:4822)
    at Session.pageBecameInteractive (turbo.es2017-esm.js:4718)
    at PageObserver.pageIsInteractive (turbo.es2017-esm.js:3880)
    at HTMLDocument.PageObserver.interpretReadyState (turbo.es2017-esm.js:3840)

Any ideas?

This is my configuration:

// app/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbo from "@hotwired/turbo"
import "jquery"
import "bootstrap"
import "../stylesheets/application"
window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js')
Rails.start()
// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Rails: '@rails/ujs',
    Popper: ['popper.js', 'default']
  })
)

module.exports = environment


Solution

  • Seems this was the setup that made it work:

    import Rails from "@rails/ujs"
    import { Turbo } from "@hotwired/turbo-rails"
    window.Turbo = Turbo
    Rails.start()
    

    Adding window.Turbo made it available outside the scope of application.js.