How to fix MIME errors on refresh when using URL parameters

Question

I don't know if I will be able to explain good enough but.. I have a setup like this

page(navigationMiddleware);

page('/', homeView);
page('/login', loginView);
page('/register', registerView);
page('/movies', catalogView);
page('/create', createView);
page('/search', searchView);
page('/movies/:movieId', detailsView);
page('/movies/:movieId/edit', editView);
page('/watch/:movieId', watchView);
page('*', notFoundView);

All pages work fine if I don't refresh the page. All pages without params after their route work fine even after refresh - everything renders perfectly. But when I am at any page with params on it (e.g. movies/idOfItem) and I try to refresh the page I get this 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.

And my page does not render.. My guess is that it loses the params?? when I refresh and can't render it because of that. But then how can I fix that? I don't know what the actual problem is. I hope someone can answer this.

I've got this error many times before, but it usually is because of wrong import paths or using something from page.js the wrong way, this might be the case here, but I don't know what to do..

Answer 1

Inserting <base href="/" /> into your head tag in the index.html file seems to fix the issue.