Cloudflare Developers•6mo ago

Loading module from "*.js" was blocked because of disallowed MIME type ("")

For the past couple of days I've been trying to create a new deployment, but loading the javascript module is always being blocked because of "disallowed MIME type". This doesn't happen when I run it on localhost or preview the site with vite preview. My build configuration:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  root: "./src",
  build: {
    outDir: "../dist",
  }
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  root: "./src",
  build: {
    outDir: "../dist",
  }
})

The output looks like this:

dist/
├── index.html
├── assets/
│   ├── index-D-ZzewU-.js
│   ├── index-DhTvDjF4.css
│   └── ...
└── icons/
    └── ...

dist/
├── index.html
├── assets/
│   ├── index-D-ZzewU-.js
│   ├── index-DhTvDjF4.css
│   └── ...
└── icons/
    └── ...

And the built index.html looks like this:

<!doctype html>
<html lang="en">
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="./icons/favicon/favicon.ico" sizes="32x32">
        <link rel="icon" href="./icons/favicon/favicon.svg" type="image/svg+xml">
        <link rel="apple-touch-icon" href="./icons/favicon/apple-touch-icon.png">
        <link rel="manifest" href="./icons/favicon/site.webmanifest">
      <script type="module" crossorigin src="/assets/index-D-ZzewU-.js"></script>
      <link rel="stylesheet" crossorigin href="/assets/index-DhTvDjF4.css">
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

<!doctype html>
<html lang="en">
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" href="./icons/favicon/favicon.ico" sizes="32x32">
        <link rel="icon" href="./icons/favicon/favicon.svg" type="image/svg+xml">
        <link rel="apple-touch-icon" href="./icons/favicon/apple-touch-icon.png">
        <link rel="manifest" href="./icons/favicon/site.webmanifest">
      <script type="module" crossorigin src="/assets/index-D-ZzewU-.js"></script>
      <link rel="stylesheet" crossorigin href="/assets/index-DhTvDjF4.css">
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

This wasn't a problem just some days ago, so maybe I have changed some settings on the Cloudflare Dashboard that I shouldn't have? Any help is appreciated 😄

2 Replies

Zarkino•6mo ago

The issue has solved itself somehow. I tried changing Vite to a previous to see if it that was causing any problems (and that made it work again), so I wanted to confirm that there indeed was an issue with the current version, but then it worked there as well, so I don't know 🤔

omnitechie•2mo ago

Facing this same issue @zarkino did you ever find the root cause?

Gaming

Programming

Loading module from "*.js" was blocked because of disallowed MIME type ("")