Comments (11)
Not to mention it looks quite easy to push a production breaking bug by unknowingly changing a link to something that won't return a frame. Without extensive integration testing this could go unnoticed.
I suggest to throw an error when an expected frame is not found so it can at least be reported through error monitoring.
from turbo.
As of 3263389 Turbo empties the frame and logs an error to the console when a matching frame is missing.
Thank you for the suggestion!
from turbo.
@viktorvan , hope this helps >>> #144 (comment)
from turbo.
I had a working sample that stopped after this v7.0.0-beta.3
release. I'm using the latest over CDN so I noticed.
If I change back to any prior v7.0.0-beta
version my code works. On the v7.0.0-beta.3
I get:
Response has no matching <turbo-frame id="beverages_list"> element turbo.js:740:13
extractForeignFrameElement https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:740
loadResponse https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:641
formSubmissionSucceededWithResponse https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:700
requestSucceededWithResponse https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:483
receive https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:351
perform https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:337
start https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:445
formSubmissionIntercepted https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:669
submitBubbled https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:538
(Async: EventListener.handleEvent)
start https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:546
connect https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:606
connectedCallback https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:55
<anonymous> https://cdn.skypack.dev/-/@hotwired/[email protected]/dist=es2020/@hotwired/turbo.js:931
I'm not sure if I'm doing something wrong (I followed https://turbo.hotwire.dev/handbook/streams) that I didn't notice but I wanted to report early on.
My page looks like this:
<!-- omitted irrelevant stuff -->
<section>
<h1>Showcase how to add to part of a page</h1>
<turbo-frame id="beverages_list">
<form action="/beverages/any" method="post">
<button type="submit">Add beverage</button>
</form>
<div id="beverage_1"><p>1 - Coffee</p></div>
</turbo-frame>
</section>
And my server response to the POST method is:
<!-- omitted irrelevant stuff -->
<body>
<h1>A Beverage (page or Turbo component)</h1>
<turbo-stream action="append" target="beverages_list">
<template>
<div id="beverage_8">
<p>
<span>8</span> - <span>Coffee</span>
</p>
</div>
</template>
</turbo-stream>
</body>
from turbo.
I am having the same issue as @brunodrugowick, for any beta > v7.0.0-beta.2, I can no longer respond with a TurboStream. I get the same "Response has no matching element" error.
from turbo.
Since this is closed and @viktorvan is having the same problem I opened a new issue.
from turbo.
The easiest solution would be to push an error log in the js console, right? As soon as we get a 404 / 500 response on the AJAX request, or?
from turbo.
Related #94
from turbo.
(Sorry for not chiming in here as well! ✌️)
from turbo.
All good ✌️
from turbo.
@sstephenson , this is a sample of the situation I mentioned above: https://hotwire-v7b3-error.herokuapp.com/
from turbo.
Related Issues (20)
- Working Turbo Frames called from the Shadow Dom HOT 2
- bfcache and data-turbo-temporary should work together HOT 4
- Possible bug with not resetting the "value" (length) of the progress bar
- Sending non-Turbo Stream data over a websocket results in Turbo appending it to the DOM HOT 2
- How to run browser tests on local machine? HOT 3
- Inaccurate `turbo:load` timing metrics on redirect visits
- Promoted Frame Visits cause `tracked_element_mismatch` reloads HOT 23
- `data-turbo-permanent` fails when using CSS View Transitions HOT 2
- fix submit polyfill in turbo 7
- Turbo Streams optional delivery confirmation receipt?
- Turbo incorrectly caches turbo-frame src when user makes a double request HOT 1
- Add support for <label for=...> that targets hidden submit input HOT 2
- progressBarDelay not working when Back press HOT 2
- Turbo Frame stays in loading state after being replaced by a previous turbo frame HOT 1
- Very slow rendering (and hiding) big partial in Google Chrome (but fast in FireFox) HOT 2
- Turbo invalidates reloads page on action=advance when head is invalid (solved)
- Remove complete state from lazily-loaded frame
- turbo 8 will support turbo-permanent on iframes? HOT 1
- Turbo ignores form ending with action ending in parameter HOT 4
- Clarify when a form is ignored
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from turbo.