Vite + React wasm errors when running rollup browser-side

Question

I'm trying to run the following rollup example: How do I run rollup in the browser?

My stack is a fresh Vite + React project, to which I only added the @rollup/browser package. When running the code in the example I get the following error:

I tried running the project on a clean jsfiddle with only the @rollup/browser package and it works just fine, so the problem is within the Vite configuration.

Anyone can help in solving this issues?

I also tried adding the vite-wasm plugin https://classic.yarnpkg.com/en/package/vite-plugin-wasm and also added the following plugin.

Thank you

Answer 1

Excluding @rollup/browser from optimizeDeps worked for me.

In vite.config.js:

import {defineConfig} from 'vite'
export default defineConfig({
  optimizeDeps: {
    exclude: ["@rollup/browser"],
  },
});

Many thanks to Anik Das who suggested this fix over in https://github.com/vitejs/vite/issues/14609 and https://github.com/curran/rollup-v4-browser-vite-demo/pull/2#issuecomment-1766852103

Here's a fully working repository with this fix incorporated:

https://github.com/curran/rollup-v4-browser-vite-demo/tree/main