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!

[KyleAMathews]

👋 we've been working the last month on a rebuild of the Electric server over at a temporary repo https://github.com/electric-sql/electric-next/

You can read more about why we made the decision at https://next.electric-sql.com/about

We're really excited about all the new possibilities the new server brings and we hope you'll check it out soon and give us your feedback.

We're now moving the temporary repo back here. As part of that migration we're closing all the old issues, PRs, and discussions. We really appreciate you taking the time to start this discussion! If it's still relevant in the new system, please reopen.