realm-web not compatible with create-react-app version ^5.0.0 #4494
Description
How frequently does the bug occur?
All the time
Description
create-react-app (CRA), the popular React single page app framework is not natively compatible with the whole Realm Web npm package since it's upgrade to version 5.0.0. this is because CRA uses webpack 5, which no longer uses polyfill by default for node core modules. the Realm Web SDK depends on the bson module, which in turn depends on the core module crypto.
while there are work arounds for this issue (see this stackoverflow comment), they don't work out of the box with create-react-app b/c create-react-app doesn't let you edit the webpack config out of the box.
i was able to use the Realm Web SDK with create-react-app, with the below message only showing as a warning for my use case, but i suspect that there'd be errors if you invoke any BSON methods that use the crypto module.
i don't think this is an urgent matter given that Realm Web is still usable with create-react-app and there are webpack work arounds, but it's at least worth being on the JS SDK team's radar.
see also (somewhat heated) conversation on this GH issue about the webpack changes on the CRA package - facebook/create-react-app#11756 (comment)
Stacktrace & log output
Compiled with warnings.
Module not found: Error: Can't resolve 'crypto' in '/Users/ben.p/projects/auth_tests/realm_firebase_auth_test/client/node_modules/bson/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }Can you reproduce the bug?
Yes, always
Reproduction Steps
- create new create-react-app:
npx create-react-app my_app - add realm-web to project:
npm i realm-web - import realm-web into your code:
import * as Realm from 'realm-web'; - initialize realm app:
const app = new Realm
after importing the module, the app will crash w the above noted log output
Version
Realm Web 1.7.0
What SDK flavour are you using?
MongoDB Realm (i.e. Sync, auth, functions)
Are you using encryption?
No, not using encryption
Platform OS and version(s)
macOS 12.3
Build environment
n/a
Cocoapods version
n/a