Vite+React构建后预览页面空白及模块解析错误求助

问题根源 #

你遇到的两次模块解析错误，核心原因是rollup-plugin-peer-deps-external插件的includeDependencies: true配置——这个设置会将所有项目依赖（包括react/jsx-runtime、vite的预加载polyfill）都标记为外部依赖，构建产物中不会包含这些模块的代码，浏览器无法解析这类裸模块标识符，因此出现空白页和报错。

解决方案 #

调整Vite配置，修正插件行为，确保必要依赖被打包进产物：

修改后的vite.config.js #

import external from "rollup-plugin-peer-deps-external";
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import mdx from "@mdx-js/rollup";

export default defineConfig({
  optimizeDeps: {
    include: ["react/jsx-runtime"],
  },
  plugins: [
    react(),
    mdx({ remarkPlugins: [] }),
    // 移除commonjs插件：Vite原生支持commonjs模块处理，无需额外配置
    external({
      // 关闭全依赖排除，仅处理peerDependencies中的依赖
      includeDependencies: false
    })
  ],
  // 若仍存在预加载polyfill相关问题，可保留该配置
  build: {
    polyfillModulePreload: false
  }
})

关键修改说明 #

• 关闭includeDependencies: true：让插件仅排除peerDependencies中声明的依赖（通常用于类库开发场景），而非所有依赖，确保react/jsx-runtime等必要模块被打包进产物。
• 移除@rollup/plugin-commonjs：Vite内置了CommonJS转译能力，额外添加该插件可能引发冲突或冗余。
• 优化插件顺序：确保react()插件优先执行，保证JSX转译流程正常。

额外验证步骤 #

1. 确认package.json中，react和react-dom属于dependencies而非peerDependencies（应用开发场景无需将其设为peer依赖）。
2. 执行npm run build后，检查dist目录产物，确认包含react/jsx-runtime相关打包代码。
3. 重新运行npm run preview验证页面是否正常渲染。

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