CODEWITHSUNDEEP
reactjsnext.jsdeploymentvitevercel
Haidepzai
Haidepzai

Reputation: 1070

Blank page after deploy React / Vite app to Vercel

I have a React / Next.js app with Vite and try to deploy it on Vercel but the page is blank and the console gives me this error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

It works locally and also when I do npm run build I have a build directory with this structure

build/
├── assets/
│   ├── index.js (hashed filename)
├── index.html

Here is my vite.config

export default defineConfig({
  base: './',
  build: {
    outDir: 'build',
  },
  plugins: [react()],
});

I also created a vercel.json with this settings

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

my index.html is as follow:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000" />
    <meta name="description" content="Web site created using Locofy" />
    <title>fwh_react</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/index.jsx"></script>
  </body>
</html>

I tried different settings on Vercel like Vite framework or as 'Others'

Output directory as build dist

Also with different Build Command like vite build --base=/

Always blank page.

Upvotes: 0

Views: 206

Answers (2)

user29704217
user29704217

Reputation: 1

Add this to vercel.json. I initially had the routes key as well because I am doing client side routing with react router dom

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ]
}

Upvotes: 0

Jo&#227;o Vitor Pereira
Jo&#227;o Vitor Pereira

Reputation: 1

I know this response is late, but try removing this key from the vercel.json file:

"routes": [
{
  "src": "/(.*)",
  "dest": "/index.html"
}

],

Your vercel.json file it would look like this:

 {
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
}

Upvotes: 0

Related Questions