Challenges with @realm/react / realm and vite.js build system

I’m trying to use @realm/react in my react/vitejs project and am having challenges with errors that I cannot seem to find much information on.

I simply have a new project started, and when I try to serve the project, I get the following error:

VITE v5.0.12  ready in 188 ms

  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
✘ [ERROR] Failed to resolve entry for package "realm". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "realm" package [plugin vite:dep-pre-bundle]

I was able to omit realm from the prebundle via the vite config of:

optimizeDeps: {
    exclude: ['realm']
  },

but then I was receiving the following error via import-analysis.

[vite] Internal server error: Failed to resolve entry for package "realm". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "realm" package
  Plugin: vite:import-analysis

Has anyone been able to use ‘realm’ in a vitejs setup and if so, how was it configured?

Unfortunately, no, I have not found a way to use “realm” in a vite project yet.

Thank you for sharing! I totally overlooked the specific, browser version of realm being installed.

I’m not being successful as there are WASM compile errors in the console.It looks like it is related to the topLevelAwait() can you share how you configured that plugin?

I came across this which helped me get up and running. Essentially vite was trying to load the wasm from the cached directory (and it didn’t exist) the custom middleware directing to mode_modules did the trick.