2 replies

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

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

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

Cloudflare Developers•2y ago•

2 replies

Zarkino

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

vite preview

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

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

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads