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

Support
, , ,
1

I deployed a react + vite project. It’s a one page application, whichs routes are managed with react browser router. On certain routes, but not on all, i get a blank page and the following 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 the website: https://deploybranch--astounding-syrniki-fb1750.netlify.app/

You can recreate the error by going on the website. Then click the register or log-in button. These routes work fine. Then go back and click on a blog-post. This should give you the aforementioned error.

There are no build error logs. The code base contains a redirect file, which makes (some) routes work. Without it you’d get a 404 error. Everything works fine on a localhost server.

This is the repo: GitHub - LXTKay/blogFrontEndAuthor at deployBranch

Build Log:

7:51:27 PM: Waiting for other deploys from your team to complete. Check the queue: Netlify
7:51:47 PM: build-image version: 006dca901dab83234b4881f914ac1a189ff41daa (focal)
7:51:47 PM: buildbot version: 91afcc08587ca1ca63cf1aa8edb323949ceee060
7:51:48 PM: Fetching cached dependencies
7:51:48 PM: Starting to download cache of 112.2MB
7:51:49 PM: Finished downloading cache in 1.189s
7:51:49 PM: Starting to extract cache
7:51:50 PM: Finished extracting cache in 1.048s
7:51:50 PM: Finished fetching cache in 2.289s
7:51:50 PM: Starting to prepare the repo for build
7:51:50 PM: Preparing Git Reference refs/heads/deployBranch
7:51:52 PM: Starting to install dependencies
7:51:52 PM: Python version set to 3.8
7:51:52 PM: Attempting Ruby version 2.7.2, read from environment
7:51:53 PM: Using Ruby version 2.7.2
7:51:53 PM: Started restoring cached go cache
7:51:53 PM: Finished restoring cached go cache
7:51:54 PM: go version go1.19.13 linux/amd64
7:51:55 PM: Using PHP version 8.0
7:51:56 PM: Started restoring cached Node.js version
7:51:57 PM: Finished restoring cached Node.js version
7:51:58 PM: v18.20.4 is already installed.
7:51:58 PM: Now using node v18.20.4 (npm v10.7.0)
7:51:58 PM: Enabling Node.js Corepack
7:51:58 PM: Started restoring cached build plugins
7:51:58 PM: Finished restoring cached build plugins
7:51:58 PM: Started restoring cached corepack dependencies
7:51:58 PM: Finished restoring cached corepack dependencies
7:51:58 PM: No npm workspaces detected
7:51:58 PM: Started restoring cached node modules
7:51:58 PM: Finished restoring cached node modules
7:51:58 PM: Installing npm packages using npm version 10.7.0
7:51:59 PM: up to date, audited 285 packages in 715ms
7:51:59 PM: 103 packages are looking for funding
7:51:59 PM: run npm fund for details
7:51:59 PM: found 0 vulnerabilities
7:51:59 PM: npm packages installed
7:51:59 PM: Successfully installed dependencies
7:51:59 PM: Starting build script
7:52:00 PM: Detected 1 framework(s)
7:52:00 PM: “vite” at version “5.3.3”
7:52:00 PM: Section completed: initializing
7:52:02 PM: ​
7:52:02 PM: Netlify Build
7:52:02 PM: ────────────────────────────────────────────────────────────────
7:52:02 PM: ​
7:52:02 PM: ❯ Version
7:52:02 PM: @netlify/build 29.51.3
7:52:02 PM: ​
7:52:02 PM: ❯ Flags
7:52:02 PM: baseRelDir: true
7:52:02 PM: buildId: 669fed9f21f2290de487e6ea
7:52:02 PM: deployId: 669fed9f21f2290de487e6ec
7:52:02 PM: ​
7:52:02 PM: ❯ Current directory
7:52:02 PM: /opt/build/repo
7:52:02 PM: ​
7:52:02 PM: ❯ Config file
7:52:02 PM: No config file was defined: using default values.
7:52:02 PM: ​
7:52:02 PM: ❯ Context
7:52:02 PM: production
7:52:02 PM: ​
7:52:02 PM: Build command from Netlify app
7:52:02 PM: ────────────────────────────────────────────────────────────────
7:52:02 PM: ​
7:52:02 PM: $ npm run build
7:52:02 PM: > blogfrontend@0.0.0 build
7:52:02 PM: > vite build
7:52:02 PM: vite v5.3.3 building for production…
7:52:02 PM: transforming…
7:52:03 PM: Post processing - header rules
7:52:03 PM: Starting post processing
7:52:03 PM: Skipping form detection
7:52:03 PM: Post processing - redirect rules
7:52:03 PM: Post processing done
7:52:03 PM: Section completed: postprocessing
7:52:03 PM: ✓ 63 modules transformed.
7:52:03 PM: rendering chunks…
7:52:03 PM: computing gzip size…
7:52:03 PM: dist/index.html 0.46 kB │ gzip: 0.30 kB
7:52:03 PM: dist/assets/index-DLK3Qp-W.css 2.86 kB │ gzip: 0.97 kB
7:52:03 PM: dist/assets/index-CdSh20_-.js 218.47 kB │ gzip: 70.13 kB
7:52:03 PM: ✓ built in 881ms
7:52:03 PM: ​
7:52:03 PM: (build.command completed in 1.2s)
7:52:03 PM: ​
7:52:03 PM: Deploy site
7:52:03 PM: ────────────────────────────────────────────────────────────────
7:52:03 PM: ​
7:52:03 PM: Starting to deploy site from ‘dist’
7:52:03 PM: Calculating files to upload
7:52:03 PM: 0 new files to upload
7:52:03 PM: 0 new functions to upload
7:52:03 PM: Section completed: deploying
7:52:03 PM: Site deploy was successfully initiated
7:52:03 PM: ​
7:52:03 PM: (Deploy site completed in 154ms)
7:52:03 PM: ​
7:52:03 PM: Netlify Build Complete
7:52:03 PM: ────────────────────────────────────────────────────────────────
7:52:03 PM: ​
7:52:03 PM: (Netlify Build completed in 1.4s)
7:52:04 PM: Site is live :sparkles:
7:52:04 PM: Caching artifacts
7:52:04 PM: Started saving node modules
7:52:04 PM: Finished saving node modules
7:52:04 PM: Started saving build plugins
7:52:04 PM: Finished saving build plugins
7:52:04 PM: Started saving corepack cache
7:52:04 PM: Finished saving corepack cache
7:52:04 PM: Started saving pip cache
7:52:04 PM: Finished saving pip cache
7:52:04 PM: Started saving emacs cask dependencies
7:52:04 PM: Finished saving emacs cask dependencies
7:52:04 PM: Started saving maven dependencies
7:52:04 PM: Finished saving maven dependencies
7:52:04 PM: Started saving boot dependencies
7:52:04 PM: Finished saving boot dependencies
7:52:04 PM: Started saving rust rustup cache
7:52:04 PM: Finished saving rust rustup cache
7:52:04 PM: Started saving go dependencies
7:52:04 PM: Finished saving go dependencies
7:52:04 PM: Build script success
7:52:04 PM: Section completed: building
7:52:05 PM: Uploading Cache of size 112.2MB
7:52:06 PM: Section completed: cleanup
7:52:06 PM: Finished processing build request in 18.356s

2

It happens simply by navigating to a blog post.

The first blog post for example tries to load:
https://deploybranch--astounding-syrniki-fb1750.netlify.app/posts/assets/index-CdSh20_-.js

You likely have an SPA _redirects rule of /* /index.html 200

So when the file that doesn’t exist is requested, it’s doing precisely that:

image
image1417×210 62.6 KB

image
image1222×331 97.9 KB

HTML is not JavaScript, and hence the error that you ultimately see in the console.

What does exist is:

https://deploybranch--astounding-syrniki-fb1750.netlify.app/assets/index-CdSh20_-.js

If you view your page source (screenshot above), you’ll see the asset references are relative:
https://developer.mozilla.org/en-US/docs/Web/API/URL_API/Resolving_relative_references#current_directory_relative
./assets/index-CdSh20_-.js

This is why when that page is viewed under /posts/ it then looks for the asset in /posts/assets/

Ensure the asset references are root relative:
https://developer.mozilla.org/en-US/docs/Web/API/URL_API/Resolving_relative_references#root_relative
/assets/index-CdSh20_-.js

Interestingly, when I run your build they are root relative:

image
image956×93 37.7 KB

3

Hello nathanmartin. First of all, thank you for your answer.

I think i somewhat understand the problem now, but can you please elaborate how to fix it? I’m not referencing any files, as this is done by the build tool, and the referenced file does not exist before the build step. And as it seems, i can not edit any files generated by netlify.

4

@LXTKay Can you confirm precisely what you have connected to your Netlify site?

You provided a link to:
https://github.com/LXTKay/blogFrontEndAuthor/tree/deployBranch

Is that the branch being built/deployed on Netlify?

5

I confirm. This is the correct branch, that is deployed on Netlify.
@nathanmartin

6

@LXTKay When you run your build locally, what do you see in the /dist/index.html file?

When I run your build:

image

I see the following in dist/index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog Frontend</title>
    <script type="module" crossorigin src="/assets/index-BCGdcLZB.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DLK3Qp-W.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

I’d expect the build on Netlify to be the same.

That said, this looks like it’d probably be the culprit here:

7

Thank you! It helped a lot. I changed the “base” property in the vite.config.js to “/” and it seems to work properly now!

export default defineConfig({
plugins: [react()],
base: “/”
})

8

Excellent, I figured that would be the case since / is the default.

For anyone else that encounters this, the relevant Vite documentation is here:

https://vitejs.dev/guide/build.html#public-base-path
https://vitejs.dev/config/shared-options.html#base

1 Like