Search code examples
reactjsvitewebassemblyrollup

Vite + React wasm errors when running rollup browser-side

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:

enter image description here

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

Solution

  • 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