Vite+React项目浏览器端运行Rollup出现Wasm错误求助

• 问题定位
  在全新 Vite + React 项目中引入 @rollup/browser 运行官方示例时出现报错，但纯净环境（如 jsfiddle）中可正常运行，说明问题源于 Vite 默认配置对 Rollup 浏览器版的兼容性处理不足，常规 wasm 插件配置无法覆盖所有冲突点。

• 解决方案步骤

  1. 修改 Vite 配置文件（vite.config.js/vite.config.ts），添加以下配置项：

     import { defineConfig } from 'vite';
     import react from '@vitejs/plugin-react';
     
     export default defineConfig({
       plugins: [react()],
       optimizeDeps: {
         exclude: ['@rollup/browser'],
         esbuildOptions: {
           supported: {
             'top-level-await': true
           }
         }
       },
       server: {
         headers: {
           'Cross-Origin-Embedder-Policy': 'require-corp',
           'Cross-Origin-Opener-Policy': 'same-origin'
         }
       },
       resolve: {
         alias: {
           '@rollup/browser': '@rollup/browser/dist/rollup.browser.js'
         }
       }
     });
     

  2. 调整组件中的导入方式，直接使用兼容浏览器的编译版本：

     import { rollup } from '@rollup/browser';
     

  3. 重启开发服务器，执行 npm run dev 或 yarn dev 后重新测试官方示例代码。

• 配置说明

  • optimizeDeps.exclude：禁止 Vite 对 @rollup/browser 进行依赖预构建，保留其原生浏览器兼容格式。
  • esbuildOptions.supported['top-level-await']：开启顶级 await 支持，适配 Rollup 浏览器版的代码特性。
  • server.headers：配置跨源相关响应头，避免 WebAssembly 加载时的跨域权限问题。
  • resolve.alias：直接指向编译完成的浏览器版文件，绕开 Vite 默认模块解析规则的冲突。

内容的提问来源于stack exchange，提问作者José Gazzano