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.

Sign up for GitHub

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

Jump to bottom

Tutorial proxy-backend returning index.html not json? #3562

Open
1 of 3 tasks
ydirson opened this issue Dec 17, 2023 · 6 comments
Open
1 of 3 tasks

Tutorial proxy-backend returning index.html not json? #3562

ydirson opened this issue Dec 17, 2023 · 6 comments
Labels
bug

Comments

@ydirson
Copy link
Contributor

ydirson commented Dec 17, 2023

Note: I think I followed the tuto right, but it may well be a user error - what really happens behind my back in trunk serve --proxy-backend indeed worries me.

Problem
In the last step of the tutorial, the trunk serve process does report proxying as expected:

2023-12-16T23:28:47.916146Z  INFO 📡 proxying /tutorial -> https://yew.rs/tutorial

but the call to json() on the Response object fails with a parse error, caught by unwrap():

panicked at src/main.rs:74:22:
called `Result::unwrap()` on an `Err` value: SerdeError(Error("expected value", line: 1, column: 1))

When querying its text() instead I get something looking like dist/index.html, excep:

  • with template bits like {{__TRUNK_ADDRESS__}} expanded
  • with different filenames, but always the 56dc19c1d... hash in them, whereas the one in dist changes on every rebuild
"<!DOCTYPE html><html lang=\"en\"><head>\n<link rel=\"preload\" href=\"/yew-tuto-56dc19c1d2397a2a9d7ed57de056ad246e9780a244ab777c8af3501c5b435ab460786da12a03b5d575a5b77bb0c0b951_bg.wasm\" as=\"fetch\" type=\"application/wasm\" crossorigin=\"anonymous\" integrity=\"sha384-VtwZwdI5eiqdftV94FatJG6XgKJEq3d8ivNQHFtDWrRgeG2hKgO11XWlt3uwwLlR\">\n<link rel=\"modulepreload\" href=\"/yew-tuto-56dc19c1d2397a2a9d7ed57de056ad246e9780a244ab777c8af3501c5b435ab460786da12a03b5d575a5b77bb0c0b951.js\" crossorigin=\"anonymous\" integrity=\"sha384-abm7hNroHgmO-4dhhx1owgizoubsoronoQebv8kzdegbKJXclKG1Se4cNkK9b48k\"></head>\n    <body>\n\n\n<script type=\"module\">\nimport init, * as bindings from '/yew-tuto-56dc19c1d2397a2a9d7ed57de056ad246e9780a244ab777c8af3501c5b435ab460786da12a03b5d575a5b77bb0c0b951.js';\ninit('/yew-tuto-56dc19c1d2397a2a9d7ed57de056ad246e9780a244ab777c8af3501c5b435ab460786da12a03b5d575a5b77bb0c0b951_bg.wasm');\nwindow.wasmBindings = bindings;\n\n</script><script>\"use strict\";\n\n(function () {\n\n    const address = 'localhost:8080';\n    let protocol = '';\n    protocol =\n        protocol\n

when my index.html reads:

<!DOCTYPE html><html lang="en"><head>
<link rel="preload" href="/yew-tuto-dfbd59d34641e15def5e2ad596d898d62fbcc1fa07f7416e23f9e3fcac1b96cac82ac4ddd0b1765a62a49daf68df933a_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" integrity="sha384-371Z00ZB4V3vXirVltiY1i-8wfoH90FuI_nj_KwblsrIKsTd0LF2WmKkna9o35M6">
<link rel="modulepreload" href="/yew-tuto-dfbd59d34641e15def5e2ad596d898d62fbcc1fa07f7416e23f9e3fcac1b96cac82ac4ddd0b1765a62a49daf68df933a.js" crossorigin="anonymous" integrity="sha384-T7wdMh576Bm4zh1ka8x7ATfiVk0hQi1dd3noLX_rCbtJmfmE_W9PnMYJdEjnGnIW"></head>
    <body>


<script type="module">
import init, * as bindings from '/yew-tuto-dfbd59d34641e15def5e2ad596d898d62fbcc1fa07f7416e23f9e3fcac1b96cac82ac4ddd0b1765a62a49daf68df933a.js';
init('/yew-tuto-dfbd59d34641e15def5e2ad596d898d62fbcc1fa07f7416e23f9e3fcac1b96cac82ac4ddd0b1765a62a49daf68df933a_bg.wasm');
window.wasmBindings = bindings;

</script><script>"use strict";

(function () {

    const address = '{{__TRUNK_ADDRESS__}}';
    let protocol = '';
...

curl http://127.0.0.1:8080/tutorial/data.json does dump me the expected JSON (and I also tried to add an intermediate tutorial step just for decoding, see repo, but I'm not pleased with how it diverges too much to be useful)

Steps To Reproduce

I uploaded my steps to https://github.com/ydirson/test-yew-tutorial

Steps to reproduce the behavior:

  1. checkout commit 'use a proxy server' to see the .json().unwrap() fail
  2. checkout commit DBG to see the text() dump

Environment:

  • Yew version:
version = "0.21.0"
source = "git+https://github.com/yewstack/yew/#1d889347a6205a2dc79c1d1fea9d49092c0627db"
  • Rust version: 1.74.0
  • Target: wasm32-unknown-unknown
  • Build tool, if relevant: trunk
  • OS, if relevant: Linux (Debian 12, amd64)
  • Browser and version: Firefox 115.5.0esr

Questionnaire

  • I'm interested in fixing this myself but don't know where to start
  • I would like to fix and I have a solution
  • I don't have time to fix this right now, but maybe later
@ydirson ydirson added the bug label Dec 17, 2023
@notno
Copy link

notno commented Jan 20, 2024

Same issue here

@hamza1311
Copy link
Member

I just ran curl https://yew.rs/tutorial/data.json and it returns the JSON for me. It appears you are querying the tutorial home page instead of the data.json file. The home page will of course returns HTML so it can be rendered by the browser

@FelixSeol
Copy link

FelixSeol commented Feb 21, 2024 •
edited

Same issue.

let fetched_videos: Vec<Video> = Request::get("/tutorial/data.json")
                    .send()
                    .await
                    .unwrap()
                    .json()
                    .await
                    .unwrap();

with this code, I ran trunk serve --proxy-backend=https://yew.rs/tutorial it returns

panicked at src/main.rs:67:22:
called `Result::unwrap()` on an `Err` value: SerdeError(Error("expected value", line: 1, column: 1))

but curl returns fine.

$ curl http://127.0.0.1:8080/tutorial/data.json
[
    {
        "id": 1,
        "title": "Building and breaking things",
        "speaker": "John Doe",
        "url": "https://youtu.be/PsaFVLr8t4E"
    },
    {
        "id": 2,
        "title": "The development process",
        "speaker": "Jane Smith",
        "url": "https://youtu.be/PsaFVLr8t4E"
    },
    {
        "id": 3,
        "title": "The Web 7.0",
        "speaker": "Matt Miller",
        "url": "https://youtu.be/PsaFVLr8t4E"
    },
    {
        "id": 4,
        "title": "Mouseless development",
        "speaker": "Tom Jerry",
        "url": "https://youtu.be/PsaFVLr8t4E"
    }
]

@FelixSeol
Copy link

FelixSeol commented Feb 21, 2024 •
edited

In my case, it turns out browser issue.

chrome Console returns

127.0.0.1/:2 The integrity attribute is currently ignored for preload destinations that do not support subresource integrity. See https://crbug.com/981419 for more information

I don't know what that means exactly, but I guess it cannot get data.json correctly and leads 'serde error'.

Safari, Firefox, Edge work fine.

@mDanone
Copy link

mDanone commented Apr 13, 2024

Had the same issue on mac m1 pro, Sonoma 14.3 with 5000 port, swithed to 8000 port and it started working pretty well. So the next step was turn 5000 back, so it continued working well. I think it is may be because of some cache issues because i noticed that first request was a bit longer then next.

@Olaoluwa26
Copy link

Thank you @mDanone, changing ports helped.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ydirson @notno @FelixSeol @mDanone @hamza1311 @Olaoluwa26