Expo Web Support

[tyrauber]

In order to build the example for expo web, a couple changes might be required:

a) should use metro for the web bundler:

    "web": {
      "favicon": "./assets/favicon.png",
      "bundler": "metro",
      "output": "static",
    },

b) resolve .mjs files in metro.config.js (Zod requires it)

config.resolver.sourceExts.push('mjs');

c) NativeModules.SourceCode.scriptURL isn't cross-platform, therefore you might need to explicitly define the hostname / url through an env variable or find a cross platform method, perhaps in expo constants.

electric/examples/expo/src/config.ts

Line 2 in 4682c4a

const { hostname } = new URL(NativeModules.SourceCode.scriptURL)

---

Unfortunately, web still errors with a require cycles:

Require cycle: ../../node_modules/electric-sql/dist/migrators/index.js -> ../../node_modules/electric-sql/dist/migrators/bundle.js -> ../../node_modules/electric-sql/dist/migrators/index.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Require cycle: ../../node_modules/sqlite-parser/lib/index.js -> ../../node_modules/sqlite-parser/lib/streaming.js -> ../../node_modules/sqlite-parser/lib/index.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Require cycle: ../../node_modules/protobufjs/src/util/minimal.js -> ../../node_modules/protobufjs/src/util/longbits.js -> ../../node_modules/protobufjs/src/util/minimal.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Require cycle: ../../node_modules/electric-sql/dist/satellite/client.js -> ../../node_modules/electric-sql/dist/satellite/shapes/cache.js -> ../../node_modules/electric-sql/dist/satellite/client.js

[thruflo]

Thanks for this, we'll take a look.

[tyrauber]

Happy to help, @thruflo. Really excited about this project. Working off of expo example. Let me know if you have any questions. I'll keep experimenting.

[balegas]

@tyrauber did you manage to fix the issues for your own needs?

Moving this into a discussion so we can track it as a feature request.

[tyrauber]

Hey @balegas, I did not. The essential issue is that expo-sqlite doesn't have web support, so you need to use a different sqlite implementation for each platform.

   if(Platform.OS === 'web'){
        conn = await ElectricDatabase.init('electric.db', '/')
      } else {
        conn = SQLite.openDatabase('electric.db');
      }

Unfortunately, this produced a series of babel issues I failed to fully debug.

[balegas]

Thanks for sharing the info, we'll look into it.

[Musta-Pollo]

Currently, I am stuck here after using wa-sqlite:

export async function initWaSQLite(dbName: string, config: ElectricConfig) {
  const { ElectricDatabase, electrify } = await import(
    "electric-sql/wa-sqlite"
  );
  const conn = await ElectricDatabase.init(dbName, distPath);
  return await electrify(conn, schema, config);
}

--
I also tried:

https://discord.com/channels/933657521581858818/1157020197576781914/1157029474420936734

-> babel-plugin-transform-import-meta
But then there is an issue with __filename

--
Did someone manage to get it working?

[ImSingee]

I wrote a babel plugin for this .

Install "babel-plugin-remove-import-meta": "^1.0.0"

and change your babel.config.js add remove-import-meta to plugin list

[Musta-Pollo]

Thank you! One error was solved :)

So you managed to get a working Expo on the web?

After fixing that error I am stuck on another one:

Did you encountered it?

[ImSingee]

Pass a custom wa-sqlite path when init the ElectricDatabase

const conn = await ElectricDatabase.init(dbName, '/lib/wa-sqlite/');

Use the following script to copy wa-sqlite wasm files to public/lib/wa-sqlite:

const { copyFile } = require('node:fs/promises');
const path = require('node:path');

// Copies the wasm files needed for wa-sqlite
// from `/node_modules/wa-sqlite/dist` into `public`
const waSqlitePath = path.join('node_modules', 'wa-sqlite', 'dist');
const publicFolder = 'public/lib/wa-sqlite';

const mjsFileName = 'wa-sqlite-async.mjs';
const mjsFile = path.join(waSqlitePath, mjsFileName);
const mjsDest = path.join(publicFolder, mjsFileName);

const wasmFileName = 'wa-sqlite-async.wasm';
const wasmFile = path.join(waSqlitePath, wasmFileName);
const wasmDest = path.join(publicFolder, wasmFileName);

try {
  copyFile(mjsFile, mjsDest);
  copyFile(wasmFile, wasmDest);
} catch {
  console.error('Could not copy wasm files required for wa-sqlite. Did you forget to run `npm install` ?');
}

[Musta-Pollo]

You are amazing 👍 ❤️ !! Thank you very much!