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
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
.