This error can show up for multiple reasons in the Chrome console. Basically, it means that when the browser tried to load a javascript file, it received something else that it did not expect. In this case, it received text/html.
In this post I explain why I got the error in my setup with Vue and Vite, and how I solved it. Hopefully I can save you an hour or two.
Background
I have a Vue3/Vite app running at mydomain.com, and another hosted at mydomain.com/client. Both apps are using vue router. The problem was encountered when visiting mydomain.com/client, hosted in a subfolder/subpath.
Vue Router History Mode
In order to enable history mode (and skip the ugly hash/#-mode) I have configured my nginx-servers to always point to index.html if no static assets are found, as a catch-all fallback, using the following configuration:
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}Why I got the MIME Type Error
When I visit mydomain.com/client, located in a subfolder, the index.html of the Vue app tries to load the javascript file index.cc8a2326.js from mydomain.com/assets/index.cc8a2326.js, when it should be loaded from mydomain.com/client/assets/index.cc8a2326.js. Since the file does not exist in the app hosted in the root folder, the catch-all in the Nginx configuration is responding with the index.html of the app hosted at mydomain.com. That’s why the mime type is text/html - it has received html, and no errors show up in the network log because it got the status code 200.
The app in the subfolder is trying to load the assets from the wrong URL.
The solution
Fortunately, the solution to the problem is really easy and documented here. Provide the command line flag --base to the build command.
In my case, the build command for my Vite app looks like this:
vite build --base=/client/My apps are now both loading the correct assets/javascript files. Hurray!
