Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”....

Khervie00 — Tue, 08 Oct 2024 13:01:47 +0000

You might come across this error when trying to preview or load up your after building and deploying, say on netlify.

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

It can be pretty annoying because your tests and build passes and even deploys but when you launch the web app, you're met with a blank empty white page.

Angry Inside Out GIF by Disney Pixar - Find & Share on GIPHY

Discover & share this Disney Pixar GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

giphy.com

What can you do?

After combing the internet in search of a solution with no success, i found one with the exact same issue here.

Open your vite.config.js file in your project folder and edit it to look like this:

export default defineConfig({
  server: {
    port: 3000,
    hmr: {
      host: "localhost",
    },
  },
  plugins: [], // Add your plugins here

  base: "/", // Take note of this!!

 // Add the rest of your build and vite config.
});

I mean add this line to your vite.config.js, if you haven't already:

  base: "/"

Or you can follow here.

What happened? (Cause of the whole wahala).

So a brief breakdown, if you encounter this and open your browser console and go to the sources area, open the folder that contains your webapp, you'll see your index.html as well as your assets folder that "should" contain your index-${hash}.css and index-${hash}.js that shows your compiled and minified Css and Javascript code, just as you saw after building in the dist folder (I know you know all this blah blah blah).

If you should open your index-${hash}.css or index-${hash}.js, it should show you your css and JS code yeah? But only it doesn't. Here's the funny part, it returns the contents of your html instead.

Here's why; The browser tries to fetch your js and css assets using the "path" in the /index.html then the rewrite would return the contents of the /index.html and the the browser trying to access a Javascript MIME typefrom your js file but fails because your js file served an html type, hence the error

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.

This is usually common in projects deployed under a nested public path, when built, it follows the path accordingly and on deployment, might fail to read imported assets references like your css and JS, so specifying the base path would rewrite all assets accordingly, i.e JS-imported asset refs, CSS url refs, and asset references in your .html files are all automatically adjusted to respect this option during build.

All the long talk to just to really tell you to specify your base property in your vite config (change to "/") like we did earlier.

Saves time and stress!

You're welcome 😉.
Follow me on X.

Relevant links

Design Struggles as a UI developer.

Khervie00 — Sun, 06 Oct 2024 06:41:39 +0000

"This thing on?"

Hi there, I'm khervie00, an indie UI developer. When I say UI development, I mean everything that concerns frontend development, Web, mobile(but not desktop yet😅😅).

And if you're a fellow indie UI dev like me, you'll agree that sourcing for sleek and crispy UI designs can be one of the hardest things to do(after trying to crack diamond).

I mean, there's the option of contacting your UI designer friend who you know cooks good but will definitely charge you and its not that you do not want to pay, because obviously they are professionals and needs to get paid for a service rendered, but where's the money to finance that?

Dave Chappelle Broke GIF - Dave Chappelle Broke Im - Discover & Share GIFs

Click to view the GIF

tenor.com

So what do you do?

What I do is, (Walk with me 😂😂😂)

This is really stressful so just hire a UI designer if you want soft life!!😖😖

What I do is basically what a UI designer will do, and what many of you will also do. Analyse the project you want to build mentally, speak to yourself.(People may think you're already going insane but no phor(I dey your back!!)
After that, take some notes, it helps for research. (Im literally just saying this, I dont really do it either, But when I did a couple of times, it helped).
The go over to figma community and search for some ideas relating to your project idea, have a quick scan at some of them (To be honest, many of them are not the best when it comes to quality of design, but just helps to give a visual idea and a thought process 😂😂😂😂).
Head over to Dribble and /or Behance, same thing but better designs, only that these ones show limited screens(UIs) and so many different options.

The majority of the work comes from your brain, dear developer, having to measure up and calculate and recalculate, and align and make sure colors, fonts and images are not out of place to give something aesthetically pleasing. or just hire a UI designer 😂😂😂

Can say this because, Ive tried it multiple times, and it works(not everytime though) and it REALLLY improves your UI and UX sense, gives you this touch and you start to pay attention to details. But its REALLLLLLLY time consuming, can't iterate that enough.

But at the end of the day, there's this touch and crispiness that the UI designers bring(good ones oh🙄) and the difference is usually clear.

Stressed Over It GIF by HULU - Find & Share on GIPHY

GIF it up for GIFs from your favorite TV shows, Hulu Originals and Exclusive programming, but it doesn't stop there. Sign up for Hulu now: hulu.com/welcome