Browser warnings: Failed to load module script

[xiki808]

Hi! I'm trying to use this plugin in my Laravel v9 + Vue using Vite setup. I'm including the plugin in Vite config making sure not to gzip manifest.json, by removing json extension using the filter option:

...
    viteCompression({
      deleteOriginFile: true,
      filter: /.(js|mjs|css|html)$/i,
    }),
...

Once I run build, I go in the mainfest.json inside public and replace all asset files' extension to include .gz, Everything looks to load fine except for the browser giving me a blank screen and the following warning:

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

Can someone help me solve this? Thank you!

[nonzzz]

This project looks like dead. I think you can try this one? vite-plugin-compression2

[xiki808]

Thanks @nonzzz but I got same errors with the other package too.

[nonzzz]

@xiki808 Have you encountered any problems? Infer from your message. I guess you want to do a ssr website? I think you should using a reverse proxy :) Because this plugin is useful for PWA/SPA.

[xiki808]

Not sure what I'm doing wrong to be honest, from the description it looks quite straight forward. I think it could be the setup in general of using this package with Laravel. In fact after running build. I would need to modify manifest.json file manually to change all asset files to use .gz extension. So far I get the same error as in the screenshot above, I think it's something to do with the browser reading .gz files.

Most likely I will need SSR yes! Although it's not the right time for the company right now to focus on this. But yeah I ended up hear after looking at my lighthouse stats!

[nonzzz]

@xiki808 . By the way. why you need manifest.json ?

[nonzzz]

According my knowledge, your server side. can get the request url. Such as /assets/index.js. you can load it by your static middleware and read the compressed version. and send it to body.

[nonzzz]

According your error screenshot. I guess you don't set the right header for it. Here is a simple nodejs demo looks like

[xiki808]

Thanks @nonzzz for your kind help. I'm not really sure, but the manifest.json I would imagine it tells Laravel where and which frontend files are needed when. Without fixing the extensions in manifest.json I get 404s for my scripts and styles.

Prob is that in Laravel generally we rely on other integrations to include and maintain frontend scripts. I'm using Inertia which is commonly used for client side rendering in React/Vue frontend setups, coupled with Vite config build. Frankly I'm not really sure what's and how in detail this is done.

[nonzzz]

@xiki808 Sorry. I'm a php noob. But i think you can try set content-encoding for each request in your server side? May be it can work.

[xiki808]

And I'm a noob in understanding what is happening in the background around this. But thanks @nonzzz I will find some time to check this thoroughly and will update here if I manage to get a solution.