Can't use Dexie in react-native

[aguycalled]

I am trying to use a library in react-native which depends on Dexie. By using indexededdbshim I intend to have react-native-sqlite-2 as backend instead of IndexedDB.

import SQLite from 'react-native-sqlite-2';
import setGlobalVars from 'indexeddbshim/dist/indexeddbshim-noninvasive';
global.window = global;

setGlobalVars(null, {
  checkOrigin: false,
  win: SQLite,
  deleteDatabaseFiles: false,
  useSQLiteIndexes: true
});

Independently of the use of the indexeddbshim strategy, I see this error:

ReferenceError: Can't find variable: addEventListener

Any clue on how to solve it?

[codemaster115]

I am also getting the same issue on React-Native(version 0.67).

[cmpayc]

The problem is in the incomplete condition:

Dexie.js/src/live-query/enable-broadcast.ts

Lines 26 to 63 in ad18b19

	} else if (typeof self !== 'undefined' && typeof navigator !== 'undefined') {
	// DOM verified - when typeof self !== "undefined", we are a window or worker. Not a Node process.
	//
	// Propagate local changes to remote tabs/windows via storage event and service worker
	// via messages. We have this code here because of https://bugs.webkit.org/show_bug.cgi?id=161472.
	//
	globalEvents(DEXIE_STORAGE_MUTATED_EVENT_NAME, (changedParts) => {
	try {
	if (!propagatingLocally) {
	if (typeof localStorage !== 'undefined') {
	// We're a browsing window or tab. Propagate to other windows/tabs via storage event:
	localStorage.setItem(
	STORAGE_MUTATED_DOM_EVENT_NAME,
	JSON.stringify({
	trig: Math.random(),
	changedParts,
	})
	);
	}
	if (typeof self['clients'] === 'object') {
	// We're a service worker. Propagate to our browser clients.
	[...self['clients'].matchAll({ includeUncontrolled: true })].forEach(
	(client) =>
	client.postMessage({
	type: STORAGE_MUTATED_DOM_EVENT_NAME,
	changedParts,
	})
	);
	}
	}
	} catch {}
	});
	//
	// Propagate remote changes locally via storage event:
	//
	addEventListener('storage', (ev: StorageEvent) => {

react-native has a navigator and self properties but no addEventListener function.

Thus, it is necessary to add additional checks on addEventListener, as is done in the file propagate-locally.ts:

Dexie.js/src/live-query/propagate-locally.ts

Lines 5 to 22 in 1c5576e

	if (typeof dispatchEvent !== 'undefined' && typeof addEventListener !== 'undefined') {
	globalEvents(DEXIE_STORAGE_MUTATED_EVENT_NAME, updatedParts => {
	if (!propagatingLocally) {
	let event: CustomEvent<ObservabilitySet>;
	if (isIEOrEdge) {
	event = document.createEvent('CustomEvent');
	event.initCustomEvent(STORAGE_MUTATED_DOM_EVENT_NAME, true, true, updatedParts);
	} else {
	event = new CustomEvent(STORAGE_MUTATED_DOM_EVENT_NAME, {
	detail: updatedParts
	});
	}
	propagatingLocally = true;
	dispatchEvent(event);
	propagatingLocally = false;
	}
	});
	addEventListener(STORAGE_MUTATED_DOM_EVENT_NAME, ({detail}: CustomEvent<ObservabilitySet>) => {

For example:

} else if (
  typeof self !== 'undefined' &&
  typeof navigator !== 'undefined' &&
  typeof addEventListener !== 'undefined'
) {