Blank page when deploying in Vercel

[oscarjpicazo]

Summary

Hi everyone!

I am trying to deploy an application in Vercel, which works correctly locally, and when it is deployed, it only shows a white tab, and an error in the console that does not appear locally.

What could I do so that instead of that white tab appearing, the application appears as it appears locally?

Example

No response

Steps to Reproduce

The deployment url:
https://feynman-tiktok.vercel.app/

I share my package.json:

{
  "name": "feynmantok",
  "version": "0.0.0",
  "scripts": {
    "co": "sui-mono commit",
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview",
    "test": "jest"
  },
  "dependencies": {
    "@supabase/supabase-js": "^1.35.7",
    "clsx": "1.1.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-dropzone": "11.4.0",
    "react-fast-marquee": "1.2.1",
    "react-router-dom": "^6.21.3",
    "wouter": "2.7.4"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/plugin-syntax-jsx": "^7.14.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@s-ui/mono": "^2.18.0",
    "@testing-library/dom": "^8.5.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.1.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/react": "17.0.21",
    "@types/react-dom": "17.0.9",
    "@vitejs/plugin-react-refresh": "1.3.6",
    "babel-jest": "^24.9.0",
    "babel-preset-react-app": "^10.0.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.2.0",
    "jest-circus": "^27.2.0",
    "jest-scss-transform": "^1.0.1",
    "jest-watch-typeahead": "^0.6.4",
    "standard": "16.0.3",
    "typescript": "4.4.3",
    "vite": "^2.5.8"
  },
  "eslintConfig": {
    "extends": [
      "./node_modules/standard/eslintrc.json"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/jest/mocks/jest.setup.js"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jsdom",
    "transform": {
      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.scss$": "jest-scss-transform",
      "^.+\\.css$": "<rootDir>/jest/mocks/cssMock.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "moduleNameMapper": {
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ],
    "resetMocks": true
  },
  "babel": {
    "env": {
      "test": {
        "presets": [
          "react-app"
        ]
      }
    }
  }
}

[SLey3]

Hi @oscarjpicazo !

I had this same issue a while ago. React is a single page application (someone can correct me if that isn't necessarily the case but is something I found in a stack overflow answer) and Vercel doesn't recognize routes set with react router dom by default.

In your vercel.json (if you have one already, if not, create one in your root directory), add the following method:

  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]

Hope this helps! If it doesn't, I would want to see that error message your getting on your console.