Web page error after modifying the sample program

[xjpch]

I'm not very familiar with compiling to web pages.

I can run the sample program normally, but as long as I modify the title or any string in app.rs, the browser will report the following error, and it will go blank and cannot display anything. I guarantee that the modified content is correct, because everything runs normally on this machine. But it doesn't work properly on the web page. I can even open the wasm link directly and it is normal.

I have tried before http://127.0.0.1:8080 http://127.0.0.1:8080/index.html http://127.0.0.1:8080/index.html#dev The results are all the same.

error message Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

The resource http://127.0.0.1:8080/eframe_template-a5ff6bdc28275b99_bg.wasm was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

[amPerl]

dev tools -> application -> clear site data should fix this. not sure what exactly goes wrong in the service worker, haven't been able to reproduce

[kelvie]

I've been able to get around this by commenting out the fetch eventListener code in sw.js, haven't had time to debug why (I'm on firefox/linux).

[chrisdsloan]

I had the same problem as OP and have a bit more information.

I had the same error message. To make sure it wasn't something I had done, I cloned eframe_template and built it as is. The first error message was complaining about eframe_template_.js. The second was complaining about the .wasm file.

What I learned is that when I did a hard reload, it would all work. When I made a change and trunk rebuilt and told the app to reload, it pulled up an index.html which had a different hash in the file name. I think that originally that file did exist, but when I cleaned everything up (trunk clean) and removed the dist directories, it was gone and was not regenerated. In fact, no files in the directory (including the target directory) referenced the hash. But again, if I reloaded (because of a change or just by pressing Ctrl-R) it would revert to that hash, which didn't exist and result in a blank gray screen.

Since the file with that name didn't exist, it looks like trunk just served my index.html as text/html. This is what caused the first error message. It was trying to interpret my index.html as javascript, seeing that it was text/html, and refusing.

Following @amPerl's advice, I brought up the dev tools, selected the "Application" tab at the top, clicked on "Storage" (for me it was not selected by default), and then selected "Clear site data". I don't remember if I just reloaded or hard reloaded at that point, but then things started working.

I wasn't able to figure out where it was getting the bogus hash from, but based on @amPerl's comment, I guess the service worker must have a reference in a cache somewhere which the "Empty cache and Hard Reload" option on Chrome's reload button did not clear.

So far, the problem hasn't recurred, but I haven't done much testing (or much development) since the fix. If I figure out what triggered in the first place, I'll report back (though there's a lot I don't know about all of this, so we'll see if I can figure anything out).

I'm not sure what my original trunk version was, but I upgrade while debugging and it now reports 0.19.2.

Outside of the eframe_template directory, rustc reports: $ rustc --version rustc 1.77.2 (25ef9e3d8 2024-04-09)

In the eframe_template directory, it reports: $ rustc --version rustc 1.76.0 (07dca489a 2024-02-04)

(because of the rust-toolchain file).

I've been testing with eframe_template version: ab640bea8

Hope that helps.