[Unhandled promise rejection: ReferenceError: Can't find variable: indexedDB] at node_modules/idb-keyval/dist/compat.cjs:34:12 in createStore

Question

[Unhandled promise rejection: ReferenceError: Can't find variable: indexedDB] at node_modules/idb-keyval/dist/compat.cjs:34:12 in createStore

carlnx opened this issue 2 years ago · comments

Well... now another issue that I did not understand :(

When I use parse (see code), it happens the error:

[Unhandled promise rejection: ReferenceError: Can't find variable: indexedDB]
at node_modules/idb-keyval/dist/compat.cjs:34:12 in createStore

The code that calls this error:

import AsyncStorage from '@react-native-async-storage/async-storage';

const bdParse = () => {
    const Parse = require('parse/react-native.js');
    Parse.setAsyncStorage(AsyncStorage);
    //APP_ID
    Parse.initialize('xxxxxxxxxx');
    Parse.masterKey = 'xxxxxxxxx';
    Parse.serverURL = 'https://xxxx.xzxxx.xxx.xx.xx/parse';
    return Parse;
}

Any ideas? :(

Originally posted by @carlnx in #144 (comment)

Jake Archibald · Answer 1 · Thu Jan 06 2022 18:55:44 GMT+0800 (China Standard Time)

This isn't enough of an example for me to debug this. Eg, the "code that calls this error" doesn't reference idb-keyval at all, so I have no idea how it's called or loaded.

I suspect it's being run in a non-browser environment, but I'm just guessing.

Please create a minimal reproducible example (https://stackoverflow.com/help/minimal-reproducible-example). Ideally, the example should be accessible somewhere public, like jsbin, Glitch, jsfiddle, codepen etc etc.

I'll reopen this issue once the details are provided.

Shiv Shankar · Answer 2 · Tue Jan 11 2022 21:11:20 GMT+0800 (China Standard Time)

@carlnx @jakearchibald I have got the same issue and I've added a minimal example below.

https://github.com/chillaxdev/RNIDbIssue

Thank You.

Jake Archibald · Answer 3 · Tue Jan 11 2022 22:19:16 GMT+0800 (China Standard Time)

Does React Native run in a browser context? What origin does it run code in? As in, what's window.origin?

Tiavina Michael Ralainirina · Answer 4 · Thu Jan 13 2022 22:08:41 GMT+0800 (China Standard Time)

Same error here. Have you found a solution?

Jake Archibald · Answer 5 · Fri Jan 14 2022 19:59:30 GMT+0800 (China Standard Time)

@tiavina-mika can you answer my question above? #145 (comment)

Carlos Frederico · Answer 6 · Mon Jan 17 2022 20:23:10 GMT+0800 (China Standard Time)

@jakearchibald , I'm not @tiavina-mika , but my code runs in React Native with Expo configured for Android and iOS, without web. I do not know if it helps you.

Jake Archibald · Answer 7 · Mon Jan 17 2022 21:57:50 GMT+0800 (China Standard Time)

idb-keyval has a hard dependency on IndexedDB, which is a web API. It won't run in a non-web context unless you're polyfilling web APIs.

Tiavina Michael Ralainirina · Answer 8 · Mon Jan 17 2022 22:03:23 GMT+0800 (China Standard Time)

@jakearchibald how to achieve that? I'm in a React Native (IOS, Android) project

Jake Archibald · Answer 9 · Mon Jan 17 2022 23:21:26 GMT+0800 (China Standard Time)

I need someone to answer the following questions:

When you see the error, is the code running in the context of a web browser or web view? If you don't know what that means, it would be useful to know the result of console.log(typeof self) and console.log(typeof self.indexedDB).
If the code is running in the context of a web browser or web view, what's the value of self.origin. As in, what is logged via console.log(self.origin)?

Tiavina Michael Ralainirina · Answer 10 · Tue Jan 18 2022 16:36:12 GMT+0800 (China Standard Time)

@jakearchibald here is the values of self:

 {
  "process": {
    "env": {
      "NODE_ENV": "development"
    }
  },
  "__DEV__": true,
  "__BUNDLE_START_TIME__": 42465743.3403,
  "__jsiExecutorDescription": "<JSCRuntime@0xae4a42b0>",
  "nativeFlushQueueImmediate": [Function nativeFlushQueueImmediate],
  "nativeCallSyncHook": [Function nativeCallSyncHook],
  "nativeLoggingHook": [Function nativeLoggingHook],
  "nativePerformanceNow": [Function nativePerformanceNow],
  "__r": [Function metroRequire],
  "__d": [Function define],
  "__c": [Function clear],
  "__registerSegment": [Function registerSegment],
  "$RefreshReg$": [Function anonymous],
  "$RefreshSig$": [Function anonymous],
  "__accept": [Function metroHotUpdateModule],
  "ErrorUtils": {
    "applyWithGuard": [Function applyWithGuard],
    "applyWithGuardIfNeeded": [Function applyWithGuardIfNeeded],
    "getGlobalHandler": [Function getGlobalHandler],
    "guard": [Function guard],
    "inGuard": [Function inGuard],
    "reportError": [Function reportError],
    "reportFatalError": [Function reportFatalError],
    "setGlobalHandler": [Function setGlobalHandler],
  },
  "GLOBAL": [Object],
  "window": [Object],
  "self": [Object],
  "performance": {
    "now": [Function anonymous],
  },
  "__fbGenNativeModule": [Function genModule],
  "originalRegeneratorRuntime": {
    "AsyncIterator": [Function AsyncIterator],
    "async": [Function anonymous],
    "awrap": [Function anonymous],
    "isGeneratorFunction": [Function anonymous],
    "keys": [Function anonymous],
    "mark": [Function anonymous],
    "values": [Function values],
    "wrap": [Function wrap],
  },
  "alert": [Function anonymous],
  "navigator": {
    "geolocation": {
      "clearWatch": [Function clearWatch],
      "getCurrentPosition": [Function anonymous],
      "stopObserving": [Function stopObserving],
      "watchPosition": [Function anonymous],
    },
    "product": "ReactNative",
  },
  "__fetchSegment": [Function __fetchSegment],
  "__getSegment": [Function __getSegment],
  "setTimeout": [Function setTimeout],
  "clearTimeout": [Function clearTimeout],
  "setImmediate": [Function setImmediate],
  "clearImmediate": [Function clearImmediate],
  "Intl": {
    "PluralRules": [Function PluralRules],
  },
  "Blob": [Function Blob],
  "Headers": [Function Headers],
  "Request": [Function Request],
  "Response": [Function Response],
  "fetch": [Function fetch],
  "__reanimatedWorkletInit": [Function anonymous],
  "_setGlobalConsole": [Function anonymous],
  "_WORKLET": false,
  "_log": [Function anonymous],
  "XMLHttpRequest": [Function XMLHttpRequest],
  "WebSocket": [Function WebSocket],
  "Buffer": [Function Buffer],
  "__blobCollectorProvider": [Function __blobCollectorProvider],
  "URLSearchParams": [Function URLSearchParams],
  "FileReader": [Function FileReader],
  "regeneratorRuntime": {
    "AsyncIterator": [Function AsyncIterator],
    "async": [Function anonymous],
    "awrap": [Function anonymous],
    "isGeneratorFunction": [Function anonymous],
    "keys": [Function anonymous],
    "mark": [Function anonymous],
    "values": [Function values],
    "wrap": [Function wrap],
  },
  "setInterval": [Function setInterval],
  "clearInterval": [Function clearInterval],
  "requestAnimationFrame": [Function requestAnimationFrame],
  "cancelAnimationFrame": [Function cancelAnimationFrame],
  "requestIdleCallback": [Function requestIdleCallback],
  "cancelIdleCallback": [Function cancelIdleCallback],
  "FormData": [Function FormData],
  "File": [Function File],
  "URL": [Function URL],
  "AbortController": [Function AbortController],
  "AbortSignal": [Function AbortSignal],
}

console.log(typeof self.indexedDB) and console.log(self.origin) return undefined

here is the warning message from console:

Jake Archibald · Answer 11 · Tue Jan 18 2022 23:27:53 GMT+0800 (China Standard Time)

console.log(typeof self.indexedDB) and console.log(self.origin) return undefined

That's what I needed.

idb-keyval is a library built on top of the web standard storage IndexedDB (that's why it's called idb-keyval). As such, this is a library intended to run in an environment that sufficiently implements IndexedDB, such as a browser.

React native is not a web-compatible environment, so this library will not work.

I'm not a React native developer, so I can't recommend an alternative storage library for you. React native's docs suggest looking at https://reactnative.directory/?search=storage. I have no idea if any of those work.