Cannot import assets via main.js file in Vite.js

Question

I run Laravel Homestead on Windows 10.

I have several Laravel sites on this box using Vite.js. I am now trying to run a simple Vite project without Laravel, but I'm having some internal Vite.js problem where assets cannot be imported from main.js.

As with all sites I run on this box (up until now only Laravel sites) I use a virtual host.

On the windows drivers/etc/hosts file:

192.168.10.10 mysite.local

On the homestead.yaml file I map mysite.local to the location of the site:

- map: mysite.local
  to: /home/vagrant/code/mysite

This works perfectly with Laravel+Vite, but not with Vite alone.

On Firefox I see the following error messages in the console:

Script from “http://mysite.local/public/vite.svg” was blocked because of a disallowed MIME type (“image/svg+xml”).

Loading module from “http://mysite.local/style.css” was blocked because of a disallowed MIME type (“text/css”).

Script from “http://mysite.local/javascript.svg” was blocked because of a disallowed MIME type (“image/svg+xml”).

In the Network tab of the developer tools these assets are blocked and there is an error message:

NS_ERROR_CORRUPTED_CONTENT

On Chrome I see the following error messages on the console:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "image/svg+xml". Strict MIME type checking is enforced for module scripts per HTML spec.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

In the Network tab of the developer tools these assets are show as if they were imported without error (200 status code).

my vite.config.js :

import { defineConfig } from 'vite';
import dns from 'dns'
dns.setDefaultResultOrder('verbatim');

export default defineConfig({
    server: {
        hmr: {
            host: 'http://mydomain.local',
        },
        watch: {
            usePolling: true
        }
    },
}); 

I have tried endlessly to change the config file, trying many options such as 'base', 'publicDir', 'origin' etc.. nothing works.

I should not that the assets are available when i paste their urls in the browser.

HMR IS working btw.

Any idea how I can get these assets to load properly?