JS Files Blocked Due to Incorrect MIME Type on Vercel Deployment

(edited)

Current Behavior: When trying to load JavaScript files from the project directory, the files are being blocked due to an incorrect MIME type (text/html instead of application/javascript ). This results in the following errors:

Loading module from “https://sorting-visualization-gtpts2g0b-matadamczyks-projects.vercel.app/public/js/auth/checkAuth.js” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://sorting-visualization-gtpts2g0b-matadamczyks-projects.vercel.app/public/js/auth/checkAuth.js”.
Loading module from “https://sorting-visualization-gtpts2g0b-matadamczyks-projects.vercel.app/public/js/app.js” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://sorting-visualization-gtpts2g0b-matadamczyks-projects.vercel.app/public/js/app.js”.

**Expected Behavior:** JavaScript files should load correctly with the MIME type `application/javascript` .

<!-- Code, configuration, and steps that reproduce this issue -->

Here is the vercel.json configuration:

{
  "version": 2,
  "builds": [
    {
      "src": "server/**",
      "use": "@vercel/node"
    },
    {
      "src": "public/**",
      "use": "@vercel/static"
    },
    {
      "src": "views/**",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    },
    {
      "src": "/auth/(.*)",
      "dest": "js/auth/$1"
    },
    {
      "src": "/js/(.*)",
      "headers": {
        "Content-Type": "application/javascript"
      },
      "dest": "/public/js/$1"
    },
    {
      "src": "public/js/(.*)",
      "headers": {
        "Content-Type": "application/javascript"
      },
      "dest": "/public/js/$1"
    },
    {
      "src": "/js/visualization.js",
      "headers": {
        "Content-Type": "application/javascript"
      },
      "dest": "/public/js/visualization.js"
    },
    {
      "src": "/js/app.js",
      "headers": {
        "Content-Type": "application/javascript"
      },
      "dest": "/public/js/app.js"
    },
    {
      "src": "/js/auth/checkAuth.js",
      "headers": {
        "Content-Type": "application/javascript"
      },
      "dest": "/public/js/auth/checkAuth.js"
    },
    {
      "src": "/public/css/(.*)",
      "headers": {
        "Content-Type": "text/css"
      },
      "dest": "/public/css/$1"
    },
    {
      "src": "/about",
      "dest": "/views/about.html"
    },
    {
      "src": "/profile",
      "dest": "/views/profile.html"
    },
    {
      "src": "/(.*)",
      "dest": "/views/index.html"
    }
  ]
}

Project URL: https://sorting-visualization-gtpts2g0b-matadamczyks-projects.vercel.app/
Framework: Node.js, Static files
Environment: Vercel deployment

Vercel Staff

Hi , welcome to the Vercel Community!

Sorry that you're facing this issue. But from the vercel.json I see you are using legacy configurations. So, I'd first request you to use the headers configuration to set custom headers on the resources.

I hope this is helpful.

Hi, I'm still struggling with the issue in vercel.json, the MIME type is still causing problems. Here is my updated vercel.json:

{
  "version": 2,
  "builds": [
    { "src": "server/**", "use": "@vercel/node" },
    { "src": "public/**", "use": "@vercel/static" },
    { "src": "views/**", "use": "@vercel/static" }
  ],
  "headers": [
    {
      "source": "/js/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        },
        {
          "key": "Content-Type",
          "value": "application/javascript"
        }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    },
    {
      "source": "/:path*",
      "has": [
        {
          "type": "query",
          "key": "authorized"
        }
      ],
      "headers": [
        {
          "key": "x-authorized",
          "value": "true"
        }
      ]
    }
  ],
  "rewrites": [
    { "source": "/js/auth/(.*)", "destination": "/public/js/auth/$1" },
    { "source": "/js/(.*)", "destination": "/public/js/$1" },
    { "source": "/js/visualization.js", "destination": "/public/js/visualization.js" },
    { "source": "/js/app.js", "destination": "/public/js/app.js" },
    { "source": "/js/auth/checkAuth.js", "destination": "/public/js/auth/checkAuth.js" },
    { "source": "/css/(.*)", "destination": "/public/css/$1" },
    { "source": "/about", "destination": "/views/about.html" },
    { "source": "/profile", "destination": "/views/profile.html" },
    { "source": "/(.*)", "destination": "/views/index.html" }
  ]
}

Here is the GitHub repository: https://github.com/matadamczyk/Sorting-Visualization

GitHub

GitHub - matadamczyk/Sorting-Visualization

Contribute to matadamczyk/Sorting-Visualization development by creating an account on GitHub.

Vercel Staff

Hi , thanks for sharing additional information. However, your current project has too many dependencies like MongoDB and auth. If you need more help, please share a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.

Hi, I've created minimal reproducible example: https://github.com/matadamczyk/SV-minimal-repo. Is this what you meant? On this example I have a problem: Uncaught SyntaxError: expected expression, got '<' app.js:1:1.

Vercel Staff

Hi , thanks for the example but it seems to be private or a deleted repository. Can you check if it's a public repo?

This topic is closed. It no longer accepts new replies.

Loading module from “https://sorting-visualization-gtpts2g0b-matadamczyks-projects.vercel.app/public/js/auth/checkAuth.js” was blocked because of a disallowed MIME type (“text/html”). Loading failed for the module with source “https://sorting-visualization-gtpts2g0b-matadamczyks-projects.vercel.app/public/js/auth/checkAuth.js”. Loading module from “https://sorting-visualization-gtpts2g0b-matadamczyks-projects.vercel.app/public/js/app.js” was blocked because of a disallowed MIME type (“text/html”). Loading failed for the module with source “https://sorting-visualization-gtpts2g0b-matadamczyks-projects.vercel.app/public/js/app.js”. **Expected Behavior:** JavaScript files should load correctly with the MIME type `application/javascript` .  Here is the vercel.json configuration: { "version": 2, "builds": [ { "src": "server/**", "use": "@vercel/node" }, { "src": "public/**", "use": "@vercel/static" }, { "src": "views/**", "use": "@vercel/static" } ], "routes": [ { "src": "/api/(.*)", "dest": "/api/$1" }, { "src": "/auth/(.*)", "dest": "js/auth/$1" }, { "src": "/js/(.*)", "headers": { "Content-Type": "application/javascript" }, "dest": "/public/js/$1" }, { "src": "public/js/(.*)", "headers": { "Content-Type": "application/javascript" }, "dest": "/public/js/$1" }, { "src": "/js/visualization.js", "headers": { "Content-Type": "application/javascript" }, "dest": "/public/js/visualization.js" }, { "src": "/js/app.js", "headers": { "Content-Type": "application/javascript" }, "dest": "/public/js/app.js" }, { "src": "/js/auth/checkAuth.js", "headers": { "Content-Type": "application/javascript" }, "dest": "/public/js/auth/checkAuth.js" }, { "src": "/public/css/(.*)", "headers": { "Content-Type": "text/css" }, "dest": "/public/css/$1" }, { "src": "/about", "dest": "/views/about.html" }, { "src": "/profile", "dest": "/views/profile.html" }, { "src": "/(.*)", "dest": "/views/index.html" } ] }

{ "version": 2, "builds": [ { "src": "server/**", "use": "@vercel/node" }, { "src": "public/**", "use": "@vercel/static" }, { "src": "views/**", "use": "@vercel/static" } ], "headers": [ { "source": "/js/(.*)", "headers": [ { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }, { "key": "Content-Type", "value": "application/javascript" } ] }, { "source": "/(.*)", "headers": [ { "key": "X-Content-Type-Options", "value": "nosniff" }, { "key": "X-Frame-Options", "value": "DENY" }, { "key": "X-XSS-Protection", "value": "1; mode=block" } ] }, { "source": "/:path*", "has": [ { "type": "query", "key": "authorized" } ], "headers": [ { "key": "x-authorized", "value": "true" } ] } ], "rewrites": [ { "source": "/js/auth/(.*)", "destination": "/public/js/auth/$1" }, { "source": "/js/(.*)", "destination": "/public/js/$1" }, { "source": "/js/visualization.js", "destination": "/public/js/visualization.js" }, { "source": "/js/app.js", "destination": "/public/js/app.js" }, { "source": "/js/auth/checkAuth.js", "destination": "/public/js/auth/checkAuth.js" }, { "source": "/css/(.*)", "destination": "/public/css/$1" }, { "source": "/about", "destination": "/views/about.html" }, { "source": "/profile", "destination": "/views/profile.html" }, { "source": "/(.*)", "destination": "/views/index.html" } ] }