Invalid MIME type for js file

Support
, ,
1

Hello, I have deployed my React application on Netlify and keep getting an error whenever I reload my application with more than one path, it returns an error with the MIME file type error.

Steps to reproduce the error

  1. First, open up my deployment preview and go to arbitrary path like https://63282e57508f1f7c9e207a9f--tasktrackee.netlify.app/hi and you could see an error page made by me, which is expected.

  2. Now, add another path to the URL like https://63282e57508f1f7c9e207a9f--tasktrackee.netlify.app/hi/random and you will see a blank screen with MIME file type error printed in the console instead of my error page.

This is the error I am getting when I open my app in Firefox, ignore the CSP error as it is just blocking my browser extension and have nothing to do with my application.

Screenshot 2022-09-18 102054
Screenshot 2022-09-18 1020541197Ă—562 50.7 KB

The error you will see on my application might be a bit different from the screenshot provided since I have added a X-Content-Type-Options = "nosniff" header to my application. Nevertheless, both present the same MIME file type error, so this header shouldn’t be the cause of this issue.

Note : I didn’t use create-react-app and instead I webpacked my own React application, so I don’t have the easy way to find a similar problem and/or solution to my case.

You can see my source code in my GitHub Repo.
Any help is appreciated.

2

Hi @AlstonChan

The issue here is the relative paths used for asset sources, e.g.

<script defer="defer" src="runtimebf23e73bbea3def002cb.js"></script>

The browser expects runtimebf23e73bbea3def002cb.js is available at

/hi/runtimebf23e73bbea3def002cb.js

when is is actually at

/runtimebf23e73bbea3def002cb.js

It loads fine on /hi because there is no trailing slash, but /hi/random is one level deeper. Changing the asset paths to start with / will remedy this. I believe this is done with the publicPath configuration.

2 Likes
3

Hi @coelmay, thanks for the solution. Setting output.publicPath to "/" does solve the problem. Thank you very much! :smiley:

1 Like