alpine: data-turbolinks-permanent: Uncaught ReferenceError on first navigation

This is tested with v2.2.3 – but this isn’t a new problem.

This is basically #309 – but I think I have narrowed it down a little to make it easier to grasp.

See this commit: https://github.com/bep/hugo-alpine-test/commit/4860d5fbde7a25133e9df94f5d9ae3c3e8f02543#diff-32861fdd10fb962832bc30955219001bR31

Here I “load” the data in the init() function.

There is a running version at https://agitated-kilby-da786e.netlify.com/

If you:

Navigate to https://agitated-kilby-da786e.netlify.com/ – the dropdown is populated OK.
Click on one of the links down on the page (powered by Turbolinks 5.2.0) you get the error below. The dropdown is still populated OK.
If you continue to navigate there is no more error.

VM141:3 Uncaught ReferenceError: item is not defined
    at eval (eval at saferEval (alpine.js:109), <anonymous>:3:52)
    at saferEval (alpine.js:109)
    at Component.evaluateReturnExpression (alpine.js:1515)
    at handleAttributeBindingDirective (alpine.js:533)
    at alpine.js:1473
    at Array.forEach (<anonymous>)
    at Component.resolveBoundAttributes (alpine.js:1459)
    at Component.initializeElement (alpine.js:1396)
    at alpine.js:1377
    at alpine.js:1369
eval @ VM141:3
saferEval @ alpine.js:109
evaluateReturnExpression @ alpine.js:1515
handleAttributeBindingDirective @ alpine.js:533
(anonymous) @ alpine.js:1473
resolveBoundAttributes @ alpine.js:1459
initializeElement @ alpine.js:1396
(anonymous) @ alpine.js:1377
(anonymous) @ alpine.js:1369
walk @ alpine.js:85
walk @ alpine.js:89
walk @ alpine.js:89
walk @ alpine.js:89
walkAndSkipNestedComponents @ alpine.js:1357
initializeElements @ alpine.js:1374
Component @ alpine.js:1304
initializeComponent @ alpine.js:1660
(anonymous) @ alpine.js:1650
(anonymous) @ alpine.js:1630
discoverUninitializedComponents @ alpine.js:1629
(anonymous) @ alpine.js:1649
(anonymous) @ alpine.js:1643
childList (async)
r @ turbolinks.js:5
o.relocateCurrentBodyPermanentElements @ turbolinks.js:5
o.replaceBody @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
e.renderView @ turbolinks.js:5
o.render @ turbolinks.js:5
e.render @ turbolinks.js:5
t.renderSnapshot @ turbolinks.js:5
t.render @ turbolinks.js:5
r.render @ turbolinks.js:6
(anonymous) @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
requestAnimationFrame (async)
r.render @ turbolinks.js:5
r.loadResponse @ turbolinks.js:5
r.visitRequestCompleted @ turbolinks.js:5
r.requestCompletedWithResponse @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
r.endRequest @ turbolinks.js:5
r.requestLoaded @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
load (async)
r.createXHR @ turbolinks.js:5
r @ turbolinks.js:5
r.issueRequest @ turbolinks.js:5
r.visitStarted @ turbolinks.js:5
r.start @ turbolinks.js:5
r.startVisit @ turbolinks.js:6
r.startVisitToLocationWithAction @ turbolinks.js:5
r.visitProposedToLocationWithAction @ turbolinks.js:5
r.visit @ turbolinks.js:5
r.clickBubbled @ turbolinks.js:6
(anonymous) @ turbolinks.js:5

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 25 (13 by maintainers)

Most upvoted comments

I agree with @SimoTod that Alpine should consider removing the Turbolinks event listener. It definitely provides the impression that Alpine does not need an adapter. Instead people should use the alpine-turbolinks-adapter.

pspeter3 on Sep 22, 2020

Is ot the page you posted at the beginning of this thread? I can copy the html from there.

@SimoTod no, the failing stuff comes from a “real project” that I cannot share as-is for now. But the failing stuff is fairly standard x-for stuff, so I should be able to reproduce it in a simpler setup. I think. I will have a look at it tomorrow. And thanks for looking into this, vey much appreciated!

bep on Apr 11, 2020

Closing since we’ve got a separate project to deal with Turbolinks integration: https://github.com/alpinejs/alpine-turbolinks-adapter

If you’re having turbolink issues, do raise issues on the adapter repo https://github.com/alpinejs/alpine-turbolinks-adapter/issues.

HugoDF on Aug 22, 2020

I think it’s better ti leave the issue in the Alpine repo, possibly mention that the adapter here and close the issue so, if people comes to alpine and search for turbolinks issues, they’ll see the adapter, they can navigate to it and either use it if it fixes their problem or open a new issue if it’s something new.

SimoTod on Jul 20, 2020

@ryangjchandler fair opinion. Note that I have done a fair amount of thinking/research on this subject. I even stated in some tweet that AlpineJS would a perfect match for Hugo (the project I’m running), but that statement was based on the assumed Turbolinks compatibility.

/cc @calebporzio

bep on Apr 11, 2020

I did a quick debug session – and it fails for the 4th (there should be only 3, so there is a duplicate element coming in from somewhere) a href in the dropdown above.

bep on Apr 8, 2020

I’ll try to debug it over the weekend and see if I can get to the bottom of the issue. 👍

SimoTod on Apr 8, 2020