Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v7.0.0-beta.3 throws Response has no matching <turbo-frame> on console #144

Closed
brunodrugowick opened this issue Jan 31, 2021 · 10 comments
Closed

Comments

@brunodrugowick
Copy link

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/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:740
    loadResponse https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:641
    formSubmissionSucceededWithResponse https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:700
    requestSucceededWithResponse https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:483
    receive https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:351
    perform https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:337
    start https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:445
    formSubmissionIntercepted https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:669
    submitBubbled https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:538
    (Async: EventListener.handleEvent)
    start https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:546
    connect https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:606
    connectedCallback https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/dist=es2020/@hotwired/turbo.js:55
    <anonymous> https://cdn.skypack.dev/-/@hotwired/turbo@v7.0.0-beta.3-tvFsO8IW4m2YjmlcLZZq/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>

Originally posted by @brunodrugowick in #31 (comment)

@brunodrugowick brunodrugowick changed the title 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. v7.0.0-beta.3 throws Response has no matching <turbo-frame> on console Jan 31, 2021
@brunodrugowick
Copy link
Author

A sample of the problem I mentioned above: https://hotwire-v7b3-error.herokuapp.com/

@seanpdoyle
Copy link
Contributor

seanpdoyle commented Jan 31, 2021

Thank you for opening this issue @brunodrugowick.

Does your response include a <turbo-frame id="beverages_list"> to match the element in the page making the request?

Is this a Rails application? What is the response content type that's rendering the HTML that contains the <turbo-stream> element? Is the response a full HTML document, or is its structure limited to the stream element? What is the HTTP status code in your response?

@khash
Copy link

khash commented Jan 31, 2021

@brunodrugowick I believe you'd need to wrap your response in the same turbo_frame_tag as well

@tleish
Copy link
Contributor

tleish commented Jan 31, 2021

The error is valid. If you intend to replace the turbo-frame content with the response, then then html response needs to include turbo-frame with a matching ID. If you want to append to an element on the page (which appears you do), then add add a different target to turbo-frame (e.g. target="_top").

<turbo-frame id="beverages_list" target="_top">

@brunodrugowick
Copy link
Author

brunodrugowick commented Jan 31, 2021

Ok, I'll answer one by one.

@seanpdoyle :

Does your response include a <turbo-frame id="beverages_list"> to match the element in the page making the request?

No. I thought I was supposed to reference the target element on the <turbo-stream action="append" target="beverages_list">. You can also see this response on the browser, on the sample I added. I based this on the handbook and, again, it works on any version prior to v7.0.0-beta.3. Here's my index.html to the left and the response to the right:
image

Is this a Rails application?

No. A Spring Boot (Java). Although this is Java + Thymeleaf (template rendering) specific, it may be worth mentioning that my app adds turbo-stream to the media-type whenever a template has stream string on its name (which is the case of this response as you'll see on the pictures below):

@Bean
public ThymeleafViewResolver viewResolver(SpringTemplateEngine templateEngine) {
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();

    viewResolver.setContentType("text/html; turbo-stream");
    viewResolver.setCharacterEncoding(StandardCharsets.UTF_8.name());
    viewResolver.setOrder(0);
    viewResolver.setViewNames(new String[] { "*stream*" });
    viewResolver.setTemplateEngine(templateEngine);

    return viewResolver;
    }

What is the response content type that's rendering the HTML that contains the element? Is the response a full HTML document, or is its structure limited to the stream element? What is the HTTP status code in your response?

The following pictures may answer all those questions:
image
image

@brunodrugowick
Copy link
Author

@brunodrugowick I believe you'd need to wrap your response in the same turbo_frame_tag as well

That's not what I get from the documentation and, also, that's not what I get from any version before v7.0.0-beta.3.

See:

image

"Appends the content within the template tag to the container designated by the target dom id."

@brunodrugowick
Copy link
Author

If you want to append to an element on the page (which appears you do), then add add a different target to turbo-frame (e.g. target="_top").

That doesn't work. See the documentation. That's what I'm doing and, again, works on v7.0.0-beta.2 and doesn't work on v7.0.0-beta.3

@tleish
Copy link
Contributor

tleish commented Jan 31, 2021

That doesn't work. See the documentation. That's what I'm doing and, again, works on v7.0.0-beta.2 and doesn't work on v7.0.0-beta.3

I don't know about v7.0.0-beta.3, but I tested a slight modification of your example using target="_top" with v7.0.0-beta.4 and it works for me.

@seb-jean
Copy link

I have the same issue :

Response has no matching <turbo-frame id="my_stuff"> element

@brunodrugowick
Copy link
Author

@seb-jean and others having the same issue, this may help you.

I fixed my problem investigating and debugging another project.

But the "solution" is also stated on the documentation here. This was changed on this commit from Jan 18. And is mentioned on the beta-3 changelog on Jan 12.

I basically changed my content-type from text/html; turbo-stream to text/vnd.turbo-stream.html on my view resolver, which is required on v7.0.0-beta.3+:

@Bean
public ThymeleafViewResolver viewResolver(SpringTemplateEngine templateEngine) {
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();

    viewResolver.setContentType("text/html; turbo-stream");
    viewResolver.setCharacterEncoding(StandardCharsets.UTF_8.name());
    viewResolver.setOrder(0);
    viewResolver.setViewNames(new String[] { "*stream*" });
    viewResolver.setTemplateEngine(templateEngine);

    return viewResolver;
}

And everything works fine now.

Thanks! And remember, folks: RTFM. <-- also a note for myself 😆

brunodrugowick added a commit to brunodrugowick/hotwire-springboot-thymeleaf-sample that referenced this issue Mar 13, 2021
There was a breaking change on beta-3 that caused the issue. See hotwired/turbo#144 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

5 participants