FlutterFlow + Supabase - issue on powersync_db.worker.js script initialization

[potocnikvid]

I am having problems with the initialization of PowerSync on my Flutter app build in Flutterflow using Supabase.

I get these errors:

This is my frontend init script:

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/backend/schema/enums/enums.dart';
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'index.dart'; // Imports other custom actions

import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart';
import 'package:powersync/powersync.dart' as powersync;
import 'package:supabase_flutter/supabase_flutter.dart';
import 'dart:async';

/**************************************************************
               
POWERSYNC SETUP INSTRUCTIONS 
               
// Paste your PowerSync Client Schema here.
// We recommend generating this from the dashboard using the "Generate client-side schema" action
// See docs https://docs.powersync.com/usage/tools/powersync-dashboard#actions

// NB: You need to prefix all Schema, powersync.Table, powersync.Column and Index calls with "powersync." due to a FF limitation

**************************************************************/

const powersync.Schema schema = powersync.Schema([
  powersync.Table('tbl_job', [
    powersync.Column.text('created_at'),
    powersync.Column.text('created_by'),
    powersync.Column.integer('reference'),
    powersync.Column.text('title'),
    powersync.Column.text('site_id'),
    powersync.Column.text('company_id'),
    powersync.Column.text('contact_id'),
    powersync.Column.text('purchase_order'),
    powersync.Column.real('value')
  ]),
  powersync.Table('tbl_report', [
    powersync.Column.text('created_at'),
    powersync.Column.text('created_by'),
    powersync.Column.text('job_id'),
    powersync.Column.text('report_typet_id'),
    powersync.Column.text('extent_of_survey'),
    powersync.Column.text('hs_info'),
    powersync.Column.text('due_date'),
    powersync.Column.text('filename'),
    powersync.Column.integer('version'),
    powersync.Column.text('version_description'),
    powersync.Column.text('report_url'),
    powersync.Column.text('distribution_list'),
    powersync.Column.text('report_prepared_by'),
    powersync.Column.text('report_approved_by'),
    powersync.Column.integer('task_sitework'),
    powersync.Column.integer('task_lab'),
    powersync.Column.integer('task_plans'),
    powersync.Column.integer('task_approved'),
    powersync.Column.integer('task_issued'),
    powersync.Column.text('site_info'),
    powersync.Column.text('allowances'),
    powersync.Column.text('special_instructions')
  ]),
  powersync.Table('tbl_report_type',
      [powersync.Column.text('title'), powersync.Column.text('app_template')]),
  powersync.Table('tbl_event', [
    powersync.Column.text('created_at'),
    powersync.Column.text('created_by'),
    powersync.Column.text('event_type_id'),
    powersync.Column.text('assigned_to_id'),
    powersync.Column.text('start_datetime'),
    powersync.Column.text('end_datetime'),
    powersync.Column.text('report_id'),
    powersync.Column.text('title'),
    powersync.Column.text('comments'),
    powersync.Column.real('revenue')
  ]),
  powersync.Table('tbl_list', [
    powersync.Column.text('tenant_id'),
    powersync.Column.text('list_name'),
    powersync.Column.text('company_id'),
    powersync.Column.text('created_at')
  ]),
  powersync.Table('tbl_listitem', [
    powersync.Column.text('list_id'),
    powersync.Column.text('text_value'),
    powersync.Column.integer('int_value'),
    powersync.Column.real('float_value'),
    powersync.Column.integer('custom_order'),
    powersync.Column.text('created_at')
  ]),
  powersync.Table('tbl_site', [
    powersync.Column.text('created_at'),
    powersync.Column.text('uprn'),
    powersync.Column.text('site_name'),
    powersync.Column.text('address'),
    powersync.Column.text('postcode'),
    powersync.Column.text('company_id'),
    powersync.Column.text('building_site_id'),
    powersync.Column.integer('asbestos_freq'),
    powersync.Column.text('asb_date'),
    powersync.Column.text('created_by')
  ]),
  powersync.Table('tbl_note', [
    powersync.Column.text('created_at'),
    powersync.Column.text('created_by'),
    powersync.Column.text('title'),
    powersync.Column.text('note'),
    powersync.Column.text('report_id'),
    powersync.Column.integer('archived')
  ]),
  powersync.Table('tbl_attachment', [
    powersync.Column.text('created_at'),
    powersync.Column.text('created_by'),
    powersync.Column.text('type'),
    powersync.Column.text('title'),
    powersync.Column.text('image_urls'),
    powersync.Column.integer('page_number'),
    powersync.Column.text('report_id'),
    powersync.Column.text('paper_size')
  ]),
  powersync.Table('tbl_asbestositem', [
    powersync.Column.text('created_at'),
    powersync.Column.text('created_by'),
    powersync.Column.text('building_id'),
    powersync.Column.integer('register_no'),
    powersync.Column.text('site_id'),
    powersync.Column.text('location_id'),
    powersync.Column.text('item_description'),
    powersync.Column.text('reference'),
    powersync.Column.text('product_type_id'),
    powersync.Column.integer('mra_product_score'),
    powersync.Column.integer('mra_condition_score'),
    powersync.Column.integer('mra_st_score'),
    powersync.Column.integer('mra_analysis_score'),
    powersync.Column.text('sample_id'),
    powersync.Column.text('analysis_result'),
    powersync.Column.integer('pra_required'),
    powersync.Column.integer('pra1'),
    powersync.Column.integer('pra2'),
    powersync.Column.integer('pra3'),
    powersync.Column.integer('pra4'),
    powersync.Column.integer('pra5'),
    powersync.Column.integer('pra6'),
    powersync.Column.integer('pra7'),
    powersync.Column.integer('pra8'),
    powersync.Column.integer('pra9'),
    powersync.Column.integer('pra10'),
    powersync.Column.text('recommendation_id'),
    powersync.Column.text('image_url'),
    powersync.Column.integer('archived'),
    powersync.Column.text('notes'),
    powersync.Column.text('extent'),
    powersync.Column.text('unit'),
    powersync.Column.integer('accessible'),
    powersync.Column.text('approach')
  ]),
  powersync.Table('tbl_asbestoslocation', [
    powersync.Column.text('created_at'),
    powersync.Column.text('building_id'),
    powersync.Column.text('reference'),
    powersync.Column.text('location_name'),
    powersync.Column.integer('accessed'),
    powersync.Column.text('notes'),
    powersync.Column.text('image_url'),
    powersync.Column.text('floor_level'),
    powersync.Column.text('created_by'),
    powersync.Column.text('parent_id'),
    powersync.Column.text('report_id')
  ])
]);

/**************************************************************
               
                       END POWERSYNC SETUP

**************************************************************/

const PowerSyncEndpoint = FFAppConstants.PowerSyncUrl;

late powersync.PowerSyncDatabase db;

//create one of these for each of your watch() queries
StreamSubscription listsSubscription = Stream<void>.empty().listen((event) {});

const bool kIsWeb = bool.fromEnvironment('dart.library.js_util');

/// Postgres Response codes that we cannot recover from by retrying.
final List<RegExp> fatalResponseCodes = [
  // Class 22 — Data Exception
  // Examples include data type mismatch.
  RegExp(r'^22...$'),
  // Class 23 — Integrity Constraint Violation.
  // Examples include NOT NULL, FOREIGN KEY and UNIQUE violations.
  RegExp(r'^23...$'),
  // INSUFFICIENT PRIVILEGE - typically a row-level security violation
  RegExp(r'^42501$'),
];

class SupabaseConnector extends powersync.PowerSyncBackendConnector {
  powersync.PowerSyncDatabase db;
  Future<void>? _refreshFuture;

  SupabaseConnector(this.db);

  /// Get a Supabase token to authenticate against the PowerSync instance.
  @override
  Future<powersync.PowerSyncCredentials?> fetchCredentials() async {
    // Wait for pending session refresh if any
    await _refreshFuture;

    // Use Supabase token for PowerSync
    final session = Supabase.instance.client.auth.currentSession;
    if (session == null) {
      // Not logged in
      return null;
    }
    // Use the access token to authenticate against PowerSync
    final token = session.accessToken;

    // userId and expiresAt are for debugging purposes only
    final userId = session.user.id;
    final expiresAt = session.expiresAt == null
        ? null
        : DateTime.fromMillisecondsSinceEpoch(session.expiresAt! * 1000);
    return powersync.PowerSyncCredentials(
        endpoint: PowerSyncEndpoint,
        token: token,
        userId: userId,
        expiresAt: expiresAt);
  }

  @override
  void invalidateCredentials() {
    // Trigger a session refresh if auth fails on PowerSync.
    // Generally, sessions should be refreshed automatically by Supabase.
    // However, in some cases it can be a while before the session refresh is
    // retried. We attempt to trigger the refresh as soon as we get an auth
    // failure on PowerSync.
    //
    // This could happen if the device was offline for a while and the session
    // expired, and nothing else attempt to use the session it in the meantime.
    //
    // Timeout the refresh call to avoid waiting for long retries,
    // and ignore any errors. Errors will surface as expired tokens.
    _refreshFuture = Supabase.instance.client.auth
        .refreshSession()
        .timeout(const Duration(seconds: 5))
        .then((response) => null, onError: (error) => null);
  }

  // Upload pending changes to Supabase.
  @override
  Future<void> uploadData(powersync.PowerSyncDatabase database) async {
    // This function is called whenever there is data to upload, whether the
    // device is online or offline.
    // If this call throws an error, it is retried periodically.
    final transaction = await database.getNextCrudTransaction();
    if (transaction == null) {
      return;
    }

    final rest = Supabase.instance.client.rest;
    powersync.CrudEntry? lastOp;
    try {
      // Note: If transactional consistency is important, use database functions
      // or edge functions to process the entire transaction in a single call.
      for (var op in transaction.crud) {
        lastOp = op;

        final table = rest.from(op.table);
        if (op.op == powersync.UpdateType.put) {
          var data = Map<String, dynamic>.of(op.opData!);
          data['id'] = op.id;
          await table.upsert(data);
        } else if (op.op == powersync.UpdateType.patch) {
          await table.update(op.opData!).eq('id', op.id);
        } else if (op.op == powersync.UpdateType.delete) {
          await table.delete().eq('id', op.id);
        }
      }

      // All operations successful.
      await transaction.complete();
    } on PostgrestException catch (e) {
      if (e.code != null &&
          fatalResponseCodes.any((re) => re.hasMatch(e.code!))) {
        /// Instead of blocking the queue with these errors,
        /// discard the (rest of the) transaction.
        ///
        /// Note that these errors typically indicate a bug in the application.
        /// If protecting against data loss is important, save the failing records
        /// elsewhere instead of discarding, and/or notify the user.
        print('Data upload error - discarding $lastOp' + e.toString());
        await transaction.complete();
      } else {
        // Error may be retryable - e.g. network error or temporary server error.
        // Throwing an error here causes this call to be retried after a delay.
        rethrow;
      }
    }
  }
}

bool isLoggedIn() {
  return Supabase.instance.client.auth.currentSession?.accessToken != null;
}

Future initpowersync() async {
  db = powersync.PowerSyncDatabase(
      schema: schema, path: await getDatabasePath());

  await db.initialize();

  SupabaseConnector? currentConnector;

  if (isLoggedIn()) {
    // If the user is already logged in, connect immediately.
    // Otherwise, connect once logged in.
    currentConnector = SupabaseConnector(db);
    db.connect(connector: currentConnector);
  }

  Supabase.instance.client.auth.onAuthStateChange.listen((data) async {
    final AuthChangeEvent event = data.event;
    if (event == AuthChangeEvent.signedIn) {
      // Connect to PowerSync when the user is signed in
      currentConnector = SupabaseConnector(db);
      db.connect(connector: currentConnector!);
    } else if (event == AuthChangeEvent.signedOut) {
      // Implicit sign out - disconnect, but don't delete data
      currentConnector = null;
      await db.disconnect();
    } else if (event == AuthChangeEvent.tokenRefreshed) {
      // Supabase token refreshed - trigger token refresh for PowerSync.
      currentConnector?.prefetchCredentials();
    }
  });

  return;
}

Future<String> getDatabasePath() async {
  var path = 'powersync-sqlite.db';
  // getApplicationSupportDirectory is not supported on Web
  if (!kIsWeb) {
    final dir = await getApplicationSupportDirectory();
    path = join(dir.path, path);
  }
  return path;
}

There are no logs in the dashboards so I am assuming this must be something on the SDK side.
Thank you for your help.

[rkistner]

The text/html content-type gives an indication that the file does not exist at the expected path in your project.

There is a command you need to run to download the worker js and WASM files, documented here: https://docs.powersync.com/client-sdk-references/flutter/flutter-web-support#additional-config

We are also actively working on removing that requirement for development, see #233.

[simolus3]

The text/html content-type gives an indication that the file does not exist at the expected path in your project.

Exactly, this is probably Flutter's service worker injecting the index.html because sqlite3.wasm wasn't found. Do you have that file in web/? If you can't serve that file, I'm sharing a workaround below that falls back to a CDN.

We've recently released a new guide that describes how PowerSync can be used in FlutterFlow project. That makes running queries against your local database easier and also has better support for web with FlutterFlow's test mode.

Of course, it's understandable that you might not want to migrate all your existing code to that library. Since version 1.11.2 of the powersync package, we support running on the web without web workers. We also upload a Dart-compatible version of sqlite3.wasm to npm, which means that you can get it through jsdeliver. For your reference, I'm sharing what we're doing in our FlutterFlow library as part of the new guide. Feel free to copy relevant items into your existing setup.

The essential items are:

1. Replace dart.library.js with dart.library.js_interop to check whether you're compiling for the web - the old library is deprecated and might not be recognized by Dart web compilers anymore. You can also just use kIsWeb from Flutter.
2. For better web performance, we strongly recommend you ship your own sqlite3.wasm, powersync_db.worker.js and powersync_sync.worker.js files in web/ and include them in your web deployment. After exporting your FlutterFlow project, you can run dart run powersync:setup_web to download compatible versions of these files.

Here are relevant snippets from our library, they might be helpful for you too. The setup code will try to use a worker / wasm file that you ship with your app first, and fall back to running in a mode where it doesn't use workers at all and a hosted sqlite3.wasm otherwise.

import 'package:powersync/powersync.dart' as ps;

Future<void> initializePowerSync() async {
  final schema = /* your powersync schema here */;
  final syncService = /* host for your powersync service */;

  final (hasOwnAssets, wasmUri) = await _wasmUri();
  final db = _db = ps.PowerSyncDatabase.withFactory(
    ps.PowerSyncOpenFactory(
      path: await _getDatabasePath(),
      sqliteOptions: ps.SqliteOptions(
        webSqliteOptions: ps.WebSqliteOptions(
          wasmUri: wasmUri,
          // If we're running in a project that doesn't have its own WASM
          // bundle, it probably won't have a worker either. Instead of trying
          // to load one, we put one from a different domain which will
          // immediately trigger a SecurityException, which makes sqlite3_web
          // fall back to the workaround avoiding workers.
          workerUri: hasOwnAssets
              ? 'db_worker.js'
              : 'https://missingworker.powersync.com/db_worker.js',
        ),
      ),
    ),
    schema: schema,
  );

  await db.initialize();

  // Setup worker here...
}

const _isCompilingToWeb = bool.fromEnvironment('dart.library.js_interop');

Future<String> _getDatabasePath() async {
  var path = 'powersync-sqlite.db';
  // getApplicationSupportDirectory is not supported on Web
  if (!_isCompilingToWeb) {
    final dir = await p.getApplicationSupportDirectory();
    path = p.join(dir.path, path);
  }
  return path;
}

const _defaultUri = 'sqlite3.wasm';
const _fallbackUri =
    'https://cdn.jsdelivr.net/npm/@powersync/dart-wasm-bundles@latest/dist/sqlite3.wasm';

Future<(bool, String)> _wasmUri() async {
  if (!kDebugMode) {
    // Force users to install their own sqlite3.wasm on release builds.
    return (true, _defaultUri);
  }

  final hasWasm = _isCompilingToWeb ? await _hasOwnSqliteWasm() : true;
  if (!hasWasm) {
    debugPrint(
      "You don't have a sqlite3.wasm in your web folder. This is expected for "
      'FlutterFlow debug builds, but please consider following the web setup '
      'guide for better web performance',
    );
    return (false, _fallbackUri);
  }

  return (true, _defaultUri);
}

Future<bool> _hasOwnSqliteWasm() async {
  // FlutterFlow's test server will serve the index.html on all paths it doesn't
  // have. This includes the wasm file. That's fine, but unfortunately it serves
  // that HTML with an application/wasm content type which breaks our check.
  // We could try making a range request and validate headers to check this, but
  // since users are really supposed to have a wasm file and we're just doing
  // this for test more, this check is easier:
  if (Uri.base.host.contains('ff-debug-service')) {
    return false;
  }

  // Check if a sqlite3.wasm exists.
  final client = http.Client();

  try {
    final response = await client.head(Uri.parse(_defaultUri));
    if (response.statusCode != 200) {
      return false;
    }

    final contentType = response.headers['content-type'];
    return contentType != null && contentType.contains('application/wasm');
  } catch (e) {
    return false;
  } finally {
    client.close();
  }
}

Applying that should solve this issue, so I'll close this issue. But feel free to respond here or reach out on Discord if you have more questions, thanks!