Expo React Native does not work with mjs files

[tobicrain]

By using the SDK with Expo (in my Pocketbase React SDK), Jest/Expo does not currently support MJS files. Maybe there is a way to replace the default entry ("main": "./dist/pocketbase.es.mjs") with something similar, also supported by Jest

[ganigeorgiev]

This looks similar to #39.

The easiest option in my opinion will be to allow mjs files in your expo config as show in portabletext/react-portabletext#6 (comment).

[tobicrain]

I mean, there are prettier things :D but if there's no other way, we'll probably leave it at that for now 👍🏻

[tobicrain]

do you know if the same errors occur with react native without expo?

[ganigeorgiev]

Sorry, I don't want to change the package.json entrypoint. The current package setup works with almost all common bundlers (including older webpack versions due to nuxt2) and the mjs extension is to ensure that the esm file will be loaded when the bundler doesn't take the module property in consideration.

It will be better to allow loading .mjs file anyway in your config, since I imagine most new packages will use it (it is also recommended by the V8 docs - https://v8.dev/features/modules#mjs).

---

do you know if the same errors occur with react native without expo?

I'm not sure. I only briefly tested a react native setup with https://snack.expo.dev/ and it works as expected there.
Another user recently reported an issue with react native related to the AuthStore (#42) but I wasn't able to reproduce it and currently I don't have a modern android device to test it properly (I have a very old galaxy s3 which I almost never use and it has android 4 or something like that, so its definitely not a reliable test device).

[tobicrain]

Hey I tried to introduce the expo webpack configuration but it didn't fix my error

[ganigeorgiev]

@tobicrain Could you post here the exact error message? This weekend I might try to find some time and investigate it further.

[ganigeorgiev]

@tobicrain In addition, you may want to check the gist linked in this issue - expo/expo#8809 (comment).

Furthermore, as suggested in expo/expo#15836, you could try adding mjs in your local metro.config.js.

[tobicrain]

@ganigeorgiev Unable to resolve "pocketbase" from "node_modules/pocketbase-react/lib/context/Pocketbase.js"

My sdk - pocketbase-react, is using current pocketbase js version.
(yesterday I forked the js SDK and changed main entry to cjs temporary that everything works fine for me)

[ganigeorgiev]

From the extensions list in the error message it doesn't seem that mjs is added there. How did you add it to your project?

Could you reproduce the same error in https://snack.expo.dev/ (for me it works fine there, for both the android and ios emulators)?

Maybe this is not an expo issue but a TypeScript one because by default TS also cannot load es modules (#34). In newer TS versions there is now nodenext compiler.module option - https://www.typescriptlang.org/docs/handbook/esm-node.html.

In any case, if you want to use the legacy cjs module, you can also try importing it directly like:

import PocketBase from 'pocketbase/cjs'

But I don't recommend the above - you should either use es modules and import style statements or cjs and require style statements.

[tobicrain]

yeah I tried everything to avoid forking the sdk, but because I have to dynamically decide which import to use, I had to fork it

[ganigeorgiev]

I don't understand what do you mean by "I have to dynamically decide which import to use". Providing always the cjs as main entrypoint will cause loading the cjs module in your case, aka. practically you are using import style statement with cjs module and this probably works only because you have a nodeResolver plugin enabled or something similar.

As mentioned earlier, registering the mjs in your bundler config should resolve the issue. Without any context it's really hard to reproduce it because there are a lot of dependencies involved (are you using babel, ts and/or other transpilers?).
Could you post what did you try to register the extension?

[tobicrain]

In any case, if you want to use the legacy cjs module, ... import PocketBase from 'pocketbase/cjs'

And that doesn't help me because I only want to import "pocketbase/cjs" if the sdk is used in react native, otherwise "pocketbase" is fine.

I'll try to recreate the whole thing with expo snack and send it to you

[tobicrain]

@ganigeorgiev
https://snack.expo.dev/@tkrainhoefner/happy-salsa
If you fill in line 8-13 in App.tsx you will see that Expo Snack is all working fine, but if you download it as a zip file and run it locally you will see the error I am getting