Hotwire Discussion

Turbo visit does not trigger `turbo:load` events on destination page

I’m trying to debug some baffling behaviour in Turbo 7.0.1 on {Safari Tech Preview 134, Firefox 94.0.1, Chrome 95.0.4638.69), running on Intel macOS Monterey:

The turbo:load event isn’t triggered on an application visit.

The code on the target page is simple:

document.addEventListener('turbo:load', function() {
    console.log('loading now');
});

Turbo seems to be working fine: I’m bundling it via rollup and loading it using

import * as Turbo from '@hotwired/turbo';

When I click links I see Turbo intercepting the click and loading pages etc:

perform [turbo.es2017-esm.js:353:35](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) issueRequest [turbo.es2017-esm.js:1380:25](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) visitStarted [turbo.es2017-esm.js:1607:14](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) start [turbo.es2017-esm.js:1337:25](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) startVisit [turbo.es2017-esm.js:1942:26](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) visitProposedToLocation [turbo.es2017-esm.js:1604:23](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) visitProposedToLocation [turbo.es2017-esm.js:2515:21](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) proposeVisit [turbo.es2017-esm.js:1936:26](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) visit[turbo.es2017-esm.js:2452:23](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) followedLinkToLocation [turbo.es2017-esm.js:2493:70](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js)LinkClickObserver/this.clickBubbled [turbo.es2017-esm.js:1888:38](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) (Async: EventListener.handleEvent)LinkClickObserver/this.clickCaptured [turbo.es2017-esm.js:1878:29](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) (Async: EventListener.handleEvent) start[turbo.es2017-esm.js:1897:29](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) start [turbo.es2017-esm.js:2422:35](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) start [turbo.es2017-esm.js:2656:12](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js) <anonymous>[turbo.es2017-esm.js:3153](http://127.0.0.1:5000/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js)

But my turbo:load: event isn’t triggered, no matter what I do. Hard-refreshing the destination page does trigger the event, though (as expected?), so I know it’s not some elementary JS error. Other turbo events are also failing to trigger, not just load.

Can anyone shed some light on why this doesn’t work?

Works on this turbo:load - JSFiddle - Code Playground.

Can you reproduce your issue on JSFiddle?

That’s going to be difficult since what I’m trying to reproduce is failing when the script exists on the destination page. Your fiddle shows that the turbo:load event fires on initial page load if Turbo is present, but I’m saying that when I visit a page with a new script in its head the turbo:load event won’t fire.

This works when clicking between 2 pages:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Index</title>
  <script type="module" src="https://cdn.skypack.dev/@hotwired/turbo"></script>
  <script>
    document.addEventListener('turbo:load', function() {
      console.log('loading now');
    });
  </script>
</head>
<body>
  <a href="page2.html">Page 2</a>
</body>
</html>
<!-- page2.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Page 1</title>
  <script type="module" src="https://cdn.skypack.dev/@hotwired/turbo"></script>
  <script>
    document.addEventListener('turbo:load', function() {
      console.log('loading now');
    });
  </script>
</head>
<body>
  <a href="index.html">Index</a>
</body>
</html>

Can you provide an example of 2 pages with it not working?