[sandbox] Missing/wrong MIME type breaks JS/ESM module scripts

[postspectacular]

Already reported this issue a while ago via DM to @ciphrd, but the sandbox doesn't seem to support JS/ESM modules anymore and after further digging it could have to do with the fact that the MIME type for these files is missing/misconfigured on your server/CDN and Chrome reports the following error:

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

Btw. Testing the project via the the minting UI workflow (uploaded to IPFS) works fine and the JS file is served with the proper headers...

Solution: Ensure this HTTP header is defined for all JS files served: Content-Type: text/javascript

[postspectacular]

This might actually have something to do with #173 and conditionally adding the header to the returned fake new Response() object could work, e.g.

https://github.com/fxhash/fxhash-website/pull/173/files#diff-6766f47c8dc6f50c293ddcae302b109b501fab79e3ea6cee7235cbdfc8bbac12R24-R25

change to:

const url = cache[id][path].url;
const record = await fetch(url);

const opts = /\.m?js([#?].*)?$/.test(url)
    ? { headers: { "content-type": "text/javascript" } }
    : undefined;

return new Response(await record.body, opts);

[maerzhase]

Thanks a lot for reporting and suggesting a possible solution @postspectacular . we will have a look asap!

[postspectacular]

Hi @maerzhase - did any of you had a chance to look at this meanwhile and/or even tried out the proposed fix? I really can't imagine I'm the only user on who is using ESM modules and the sandbox is currently still broken for anyone else using modules (e.g. via vite, esbuild, parcel or other popular dev tools)... I could submit a PR, but have no idea how to test this. Let me know pls, thanks!

[maerzhase]

@postspectacular i already looked into it but the proposed fix doesn't seem to work. it looks like that the module resources are currently not being fetched—which i am trying to find a solution for.

We haven't heard other reports of the issue yet, probably because most people use a cjs bundle for publishing—fixing this issue though would be definitely in favour for everyone.

About testing: You can actually run the repository locally ootb if you are eager to find a solution. be aware: debuggin the service worker can be a little bit annoying because browser seem to cache them no matter if cache is disabled or not. so reopening the tab is mandatory

[ostwilkens]

As someone subscribed to this issue a while ago, I just want to chime in and say that whenever I have issues with the sandbox, I just test using https://www.fxhash.xyz/mint-generative/ instead. Sadly, I feel the current sandbox environment is too far from the real deal, I can't trust it.

[maerzhase]

@postspectacular i found a solution and created the PR if you are curious you could test it with your project. otherwise we probably need to wait a moment because currently all eyes are on fx(text)

[postspectacular]

@maerzhase I'm not in a rush at all and I've been doing the same thing as @ostwilkens so far, i.e. testing via the minting UI. However, I've been getting a few questions from people using my project template (which is using vite) and they're hitting the same issue (though I refer people to this issue here from the readme too)... All in your own time!

[ciphrd]

This issue has been resolved and is now merged, it will be shipped with the next release in the upcoming days.
Thanks for reporting it and for your contribution.