使用React搭配Vite时浏览器覆盖层不显示运行时错误问题咨询

方案1：显式配置React插件的错误覆盖层 #

Vite的@vitejs/plugin-react部分版本中，错误覆盖层需要显式启用。修改你的vite.config.js，给react插件添加对应配置：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      // 启用错误覆盖层
      overlay: true,
      // 若使用旧版JSX运行时，可添加此配置
      jsxRuntime: 'classic'
    })
  ],
  server:{
    port:3000
  }
});

方案2：确认启动的是开发环境 #

确保你使用npm run dev启动开发服务器，生产构建命令（如npm run build）会自动禁用错误覆盖层，仅保留控制台错误输出。

方案3：排查浏览器干扰因素 #

• 检查浏览器是否禁用了弹窗类内容显示
• 关闭广告拦截器、脚本屏蔽类插件，这类工具可能会阻止Vite错误覆盖层的渲染

方案4：更新依赖版本 #

旧版Vite或React插件可能存在覆盖层显示bug，执行命令更新依赖：

npm update vite @vitejs/plugin-react

内容的提问来源于stack exchange，提问作者tedGuy