JS Files Blocked Due to Incorrect MIME Type on Vercel Deployment

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"
    }
  ]
}

Hi @matadamczyk, 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.

2 Likes

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: GitHub - matadamczyk/Sorting-Visualization

Hi @matadamczyk, 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: GitHub - 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.

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