React Native Web integration no longer working?

[blake-weissman]

Based on my own attempts setting up React Native Web integration & other reports on the discord (https://discord.com/channels/1138230179878154300/1138251135929548850/threads/1315687416358637598) the React Native Web support doesn't seem to be fully reliable/functional at this time. Are there any plans to fix the self not defined issue?

[Chriztiaan]

Hey @blake-weissman! Our RNW demo currently works for Expo 51 and RNW 19.13, and there have been issues reported for Expo 52 and the newer RNW version 19.13 which seems to be related to new routing features (maybe Expo API routes -which only recently exited experimental anyway) causing client side code to be processed on the metro server side IIRC.

The same discord threads describing the problem have mentioned workarounds(with code examples) which should allow you to to handle/avoid instantiation a PS db for these server cases. We will be updating the RNW demo in the near future, but there isn't a fixed timeline. These scenarios do happen naturally as frameworks and libraries introduce breaking changes such as this one and we try to keep our demos up to date as much as we can.

Let me know if the described solutions in the discord don't resolve the issue for you (a few of the users did say it fixed it for them), otherwise I'll be sure to ping you when the updated demo is available.

[blake-weissman]

@Chriztiaan I've also tried creating a new expo app @ version 51 & still wasn't able to get it working with a "standard setup". If I recall correctly I'd at some point run into a self is not defined or cannot read "text" of undefined error in the browser (cannot read "text" of undefined is coming from defining the AppSchema ex: created_at: column.text). Maybe I was missing something.

I think I've gotten those two errors at some point each time I've tried to set up a React Native Web instance whether it's on Expo 52, Expo 51, or the included React Native Web demo.

For further reference at the same time as the self is not defined error in the browser I've seen the following error in the npm run web output (I've replaced my project path with "..."):

Attempted to import the module ".../node_modules/@powersync/web/dist/index.umd.js" which is not listed in the "exports" of ".../node_modules/@powersync/web" under the requested subpath "./dist/index.umd.js". Falling back to file-based resolution. Consider updating the call site or asking the package maintainer(s) to expose this API.

The above error is with the metro.config.js setup in the docs.

I was able to start to get some things running by using the following based off the Discord:

import { Platform } from "react-native";
import PowerSyncWebReadyModule from "./PowerSyncWebReadyModule";

const DynamicPowerSyncModule = Platform.select({
  web: PowerSyncWebReadyModule,
  default: require("@powersync/react-native"),
});

export default DynamicPowerSyncModule;

const PowerSyncWebReadyModule = typeof window !== "undefined" ? require("@powersync/web") : undefined;

export default PowerSyncWebReadyModule;

At this moment in time I've started looking into alternatives from PowerSync instead of spending more time on it but maybe the details I've provided above can be useful. I'm also unsure if the setup I've provided will end up being usable for a full implementation/integration but thought I'd provide it too.