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

1

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?

2

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

Can you reproduce your issue on JSFiddle?

3

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.

4

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?