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

MongoDB Atlas App Services & Realm
,
1

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?

2

Hey were you able to resolve this? Having same issue trying to use realm-web in tauri with @realm/react package to initialize realm, user, and app

3

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

4

I was able to resolve the error itself by following the template from this Web Example. I also made sure to set topLevelAwait with the following Vite Plugin. The key was to install the following version of realm: “realm”: “12.0.0-browser.2” and now can also use @realm/react.

1 Like
5

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?

6

yea unfortunately that’s where I am stuck as well. Not sure of any workarounds; going to try and just use the realm-web package instead.

7

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.

1 Like
8

Yepp that did the trick! Big thanks!

9

Can you please share a code snippet of this middleware?