[GH-ISSUE #4661] [bug]: Black screen on the demo because a Javascript file is being served as HTML #1727

New issue

Closed

opened 2026-03-16 21:32:39 +03:00 by kerem · 1 comment

kerem commented

2026-03-16 21:32:39 +03:00

Owner

Originally created by @Pamasich on GitHub (Jan 6, 2025).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/4661

Is there an existing issue for this?

I have searched the existing issues

Current behavior

I just tried to access Hoppscotch.io and got nothing but a black screen. The console says 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.
Indeed, checking the network tab, the indicated file (index-615f263b.js) returned an HTML response:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="preload" as="font" type="font/woff2" href="/assets/inter-cyrillic-ext-wght-normal-1c3007b8.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/inter-cyrillic-wght-normal-eba94878.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/inter-greek-ext-wght-normal-81f77e51.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/inter-greek-wght-normal-d92c6cbc.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/inter-vietnamese-wght-normal-15df7612.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/inter-latin-ext-wght-normal-a2bfd9fe.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/inter-latin-wght-normal-88df0b5a.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-cyrillic-ext-wght-normal-d694a640.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-cyrillic-wght-normal-f5503b96.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-greek-wght-normal-5e78ebd0.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-vietnamese-wght-normal-1651b21a.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-latin-ext-wght-normal-d3f58cdc.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-latin-wght-normal-47388fbc.woff2" crossorigin="anonymous">
    <link rel="preload" as="font" type="font/woff2" href="/assets/material-symbols-rounded-latin-wght-normal-9bbc4870.woff2" crossorigin="anonymous">

    <script type="module" crossorigin src="/assets/polyfills-12d7535c.js"></script>

    <script>
      globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"')
    </script>
    <title>Hoppscotch • Open source API development ecosystem</title>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" href="/icon.png" />
    <meta name="keywords" content="hoppscotch, hopp scotch, hoppscotch online, hoppscotch app, postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio">
    <meta name="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="name" content="Hoppscotch • Open source API development ecosystem">
    <meta name="description" content="Helps you create requests faster, saving precious time on development.">
    <meta name="image" content="https://hoppscotch.io/banner.png">
    <meta name="og:title" content="Hoppscotch • Open source API development ecosystem">
    <meta name="og:description" content="Helps you create requests faster, saving precious time on development.">
    <meta name="og:image" content="https://hoppscotch.io/banner.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@hoppscotch_io">
    <meta name="twitter:creator" content="@hoppscotch_io">
    <meta name="twitter:title" content="Hoppscotch • Open source API development ecosystem">
    <meta name="twitter:description" content="Helps you create requests faster, saving precious time on development.">
    <meta name="twitter:image" content="https://hoppscotch.io/banner.png">
    <meta name="application-name" content="Hoppscotch">
    <meta name="msapplication-TileImage" content="https://hoppscotch.io/icon.png">
    <meta name="msapplication-TileColor" content="#181818">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="apple-mobile-web-app-title" content="Hoppscotch">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#181818" media="(prefers-color-scheme: dark)">
    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
    <meta name="supported-color-schemes" content="light dark">
    <meta name="mask-icon" content="/icon.png" color="#181818">
    <script type="module" crossorigin src="/assets/index-615f263b.js"></script>
    <link rel="stylesheet" href="/assets/index-0fa75c83.css">
  <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials"></head>
  <body>
    <div id="app"></div>
    <script>
      // Shims to make swagger-parser package work
      window.global = window
    </script>
    
    
  </body>
</html>

I've cleared my cache and disabled my adblocker just in case.

The status code of the request is 304, the headers are:

:authority: hoppscotch.io
:method: GET
:path: /assets/index-615f263b.js
:scheme: https
Accept: /
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: en-US,en;q=0.9,de;q=0.8,de-CH;q=0.7
If-None-Match: "c9d5c1b9b26419c4630fc581ade29f93-ssl-df"
Origin: https://hoppscotch.io
Priority: u=1
Referer: https://hoppscotch.io/
Sec-Ch-Ua: "Microsoft Edge";v="129", "Not=A?Brand";v="8", "Chromium";v="129"
Sec-Ch-Ua-Mobile: ?0
Sec-Ch-Ua-Platform: "Windows"
Sec-Fetch-Dest: script
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0

I don't know what the environments here mean, I put it on deploy preview because the issue is about the demo and that sounds similar.

Steps to reproduce

Open hoppscotch.io
It doesn't load

Environment

Deploy preview

Version

Cloud

Originally created by @Pamasich on GitHub (Jan 6, 2025). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/4661 ### Is there an existing issue for this? - [X] I have searched the existing issues ### Current behavior I just tried to access Hoppscotch.io and got nothing but a black screen. The console says `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.` Indeed, checking the network tab, the indicated file (index-615f263b.js) returned an HTML response: ``` <!DOCTYPE html> <html lang="en"> <head> <link rel="preload" as="font" type="font/woff2" href="/assets/inter-cyrillic-ext-wght-normal-1c3007b8.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/inter-cyrillic-wght-normal-eba94878.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/inter-greek-ext-wght-normal-81f77e51.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/inter-greek-wght-normal-d92c6cbc.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/inter-vietnamese-wght-normal-15df7612.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/inter-latin-ext-wght-normal-a2bfd9fe.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/inter-latin-wght-normal-88df0b5a.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-cyrillic-ext-wght-normal-d694a640.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-cyrillic-wght-normal-f5503b96.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-greek-wght-normal-5e78ebd0.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-vietnamese-wght-normal-1651b21a.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-latin-ext-wght-normal-d3f58cdc.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/roboto-mono-latin-wght-normal-47388fbc.woff2" crossorigin="anonymous"> <link rel="preload" as="font" type="font/woff2" href="/assets/material-symbols-rounded-latin-wght-normal-9bbc4870.woff2" crossorigin="anonymous"> <script type="module" crossorigin src="/assets/polyfills-12d7535c.js"></script> <script> globalThis.import_meta_env = JSON.parse('"import_meta_env_placeholder"') </script> <title>Hoppscotch • Open source API development ecosystem</title> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="apple-touch-icon" href="/icon.png" /> <meta name="keywords" content="hoppscotch, hopp scotch, hoppscotch online, hoppscotch app, postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio"> <meta name="X-UA-Compatible" content="IE=edge, chrome=1"> <meta name="name" content="Hoppscotch • Open source API development ecosystem"> <meta name="description" content="Helps you create requests faster, saving precious time on development."> <meta name="image" content="https://hoppscotch.io/banner.png"> <meta name="og:title" content="Hoppscotch • Open source API development ecosystem"> <meta name="og:description" content="Helps you create requests faster, saving precious time on development."> <meta name="og:image" content="https://hoppscotch.io/banner.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@hoppscotch_io"> <meta name="twitter:creator" content="@hoppscotch_io"> <meta name="twitter:title" content="Hoppscotch • Open source API development ecosystem"> <meta name="twitter:description" content="Helps you create requests faster, saving precious time on development."> <meta name="twitter:image" content="https://hoppscotch.io/banner.png"> <meta name="application-name" content="Hoppscotch"> <meta name="msapplication-TileImage" content="https://hoppscotch.io/icon.png"> <meta name="msapplication-TileColor" content="#181818"> <meta name="msapplication-tap-highlight" content="no"> <meta name="apple-mobile-web-app-title" content="Hoppscotch"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="theme-color" content="#181818" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="supported-color-schemes" content="light dark"> <meta name="mask-icon" content="/icon.png" color="#181818"> <script type="module" crossorigin src="/assets/index-615f263b.js"></script> <link rel="stylesheet" href="/assets/index-0fa75c83.css"> <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials"></head> <body> <div id="app"></div> <script> // Shims to make swagger-parser package work window.global = window </script> </body> </html> ``` I've cleared my cache and disabled my adblocker just in case. The status code of the request is 304, the headers are: - :authority: hoppscotch.io - :method: GET - :path: /assets/index-615f263b.js - :scheme: https - Accept: */* - Accept-Encoding: gzip, deflate, br, zstd - Accept-Language: en-US,en;q=0.9,de;q=0.8,de-CH;q=0.7 - If-None-Match: "c9d5c1b9b26419c4630fc581ade29f93-ssl-df" - Origin: https://hoppscotch.io - Priority: u=1 - Referer: https://hoppscotch.io/ - Sec-Ch-Ua: "Microsoft Edge";v="129", "Not=A?Brand";v="8", "Chromium";v="129" - Sec-Ch-Ua-Mobile: ?0 - Sec-Ch-Ua-Platform: "Windows" - Sec-Fetch-Dest: script - Sec-Fetch-Mode: cors - Sec-Fetch-Site: same-origin - User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0 I don't know what the environments here mean, I put it on deploy preview because the issue is about the demo and that sounds similar. ### Steps to reproduce 1. Open hoppscotch.io 2. It doesn't load ### Environment Deploy preview ### Version Cloud