Vue app on Cloudflare Pages is deploying incorrect Mime Types

Developers Cloudflare Pages
1

Similar to this: Hosting content on cloudflare pages service and MIME types and many others.

Have deployed a Vue3 web app onto Cloudflare Pages. Nothing else setup in the Cloudflare account. This web app deploys and runs without issue on Netlify.

However, on Cloudflare the deploy completes, all assets are copied across, but the site is a blank page in Firefox and MS Edge (both macOS).

Inspecting console reveals some - not all - of the JS, CSS assets produced in the build have the wrong mime types. I’ve obscured the here:

The resource from “https://.pages.dev/themes/lara-light-blue/theme.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “https://.pages.dev/assets/index-5dfe77b6.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Loading module from “https://.pages.dev/assets/index-8f499929.js” was blocked because of a disallowed MIME type (“text/html”).

Viewing the Deployment, the assets were built and copied over, so it’s a hidden 404. They’ve just been given the wrong mime type.

I don’t want to have to write workers to rewrite mime types. This looks like a bug in Cloudflare Pages, given others have experienced it intermittently too.

Thoughts?

3

What is the domain for testing?

4

This isn’t the wrong mime type. You’re hitting a 404 on the assets so it loads the index page - Serving Pages · Cloudflare Pages docs

As I’m sure you’ve read on many of the other topics, this isn’t a Pages issue and is likely just a configuration issue. Wrong output directory or similar.

3 Likes
5

Okay, I understand, but it’s confusing - the deployment shows all those assets are deployed. The build folder is listed correctly. The root is correct. I can npm run build locally and see and serve the site no issues. I can deploy same on Netlify with no issue. Just trying out Pages and it seems like there’s some magic setup I’m missing with a Node / Vue3 deploy? Just using standard vite builds. What’s Cloudflare Pages expecting in the Vite build process that’s different to other services?