Running this in Chrome throws "Cannot set property indexedDB of #<Window> which has only a getter"

[MartijnHols]

On Chrome, running auto, throws the error "Cannot set property indexedDB of # which has only a getter". Changing the auto script like so fixed the issue for me:

diff --git a/node_modules/fake-indexeddb/auto/index.js b/node_modules/fake-indexeddb/auto/index.js
index 1c65d4b..05e0a41 100644
--- a/node_modules/fake-indexeddb/auto/index.js
+++ b/node_modules/fake-indexeddb/auto/index.js
@@ -21,15 +21,39 @@ var globalVar =
         ? global
         : Function("return this;")();

-globalVar.indexedDB = fakeIndexedDB;
-globalVar.IDBCursor = FDBCursor;
-globalVar.IDBCursorWithValue = FDBCursorWithValue;
-globalVar.IDBDatabase = FDBDatabase;
-globalVar.IDBFactory = FDBFactory;
-globalVar.IDBIndex = FDBIndex;
-globalVar.IDBKeyRange = FDBKeyRange;
-globalVar.IDBObjectStore = FDBObjectStore;
-globalVar.IDBOpenDBRequest = FDBOpenDBRequest;
-globalVar.IDBRequest = FDBRequest;
-globalVar.IDBTransaction = FDBTransaction;
-globalVar.IDBVersionChangeEvent = FDBVersionChangeEvent;
+Object.defineProperty(globalVar, 'indexedDB', {
+    value: fakeIndexedDB
+});
+Object.defineProperty(globalVar, 'IDBCursor', {
+    value: FDBCursor
+});
+Object.defineProperty(globalVar, 'IDBCursorWithValue', {
+    value: FDBCursorWithValue
+});
+Object.defineProperty(globalVar, 'IDBDatabase', {
+    value: FDBDatabase
+});
+Object.defineProperty(globalVar, 'IDBFactory', {
+    value: FDBFactory
+});
+Object.defineProperty(globalVar, 'IDBIndex', {
+    value: FDBIndex
+});
+Object.defineProperty(globalVar, 'IDBKeyRange', {
+    value: FDBKeyRange
+});
+Object.defineProperty(globalVar, 'IDBObjectStore', {
+    value: FDBObjectStore
+});
+Object.defineProperty(globalVar, 'IDBOpenDBRequest', {
+    value: FDBOpenDBRequest
+});
+Object.defineProperty(globalVar, 'IDBRequest', {
+    value: FDBRequest
+});
+Object.defineProperty(globalVar, 'IDBTransaction', {
+    value: FDBTransaction
+});
+Object.defineProperty(globalVar, 'IDBVersionChangeEvent', {
+    value: FDBVersionChangeEvent
+});
diff --git a/node_modules/fake-indexeddb/auto/index.mjs b/node_modules/fake-indexeddb/auto/index.mjs
index 70355f9..134299f 100644
--- a/node_modules/fake-indexeddb/auto/index.mjs
+++ b/node_modules/fake-indexeddb/auto/index.mjs
@@ -21,15 +21,40 @@ var globalVar =
         ? global
         : Function("return this;")();

-globalVar.indexedDB = fakeIndexedDB;
-globalVar.IDBCursor = FDBCursor;
-globalVar.IDBCursorWithValue = FDBCursorWithValue;
-globalVar.IDBDatabase = FDBDatabase;
-globalVar.IDBFactory = FDBFactory;
-globalVar.IDBIndex = FDBIndex;
-globalVar.IDBKeyRange = FDBKeyRange;
-globalVar.IDBObjectStore = FDBObjectStore;
-globalVar.IDBOpenDBRequest = FDBOpenDBRequest;
-globalVar.IDBRequest = FDBRequest;
-globalVar.IDBTransaction = FDBTransaction;
-globalVar.IDBVersionChangeEvent = FDBVersionChangeEvent;
+Object.defineProperty(globalVar, 'indexedDB', {
+    value: fakeIndexedDB
+});
+Object.defineProperty(globalVar, 'IDBCursor', {
+    value: FDBCursor
+});
+Object.defineProperty(globalVar, 'IDBCursorWithValue', {
+    value: FDBCursorWithValue
+});
+Object.defineProperty(globalVar, 'IDBDatabase', {
+    value: FDBDatabase
+});
+Object.defineProperty(globalVar, 'IDBFactory', {
+    value: FDBFactory
+});
+Object.defineProperty(globalVar, 'IDBIndex', {
+    value: FDBIndex
+});
+Object.defineProperty(globalVar, 'IDBKeyRange', {
+    value: FDBKeyRange
+});
+Object.defineProperty(globalVar, 'IDBObjectStore', {
+    value: FDBObjectStore
+});
+Object.defineProperty(globalVar, 'IDBOpenDBRequest', {
+    value: FDBOpenDBRequest
+});
+Object.defineProperty(globalVar, 'IDBRequest', {
+    value: FDBRequest
+});
+Object.defineProperty(globalVar, 'IDBTransaction', {
+    value: FDBTransaction
+});
+Object.defineProperty(globalVar, 'IDBVersionChangeEvent', {
+    value: FDBVersionChangeEvent
+});
+        
\ No newline at end of file

Would you be open to a PR?

[dumbmatter]

idk what would be best.

I don't see the error you do, at least when doing simple stuff in the browser console. But still, just replacing the variable doesn't work unless I use defineProperty like you did:

But I don't know exactly what is implied by using this other way of defining a variable, might it cause some other problems? Feels like if the browser is not letting you overwrite a variable there may be a good reason...

Also just for my curiosity, why do you want this to run in the browser? You could just use the real IndexedDB then.

And as a quick workaround for anyone targeting the browser, you could import the variables explicitly from fake-indexeddb rather than using fake-indexeddb/auto.

[MartijnHols]

We're using it in Cypress component testing and Storybook where we don't want to modify the actual IndexedDB, have to reset it between every component, and we figured a memory variant would be (much) quicker.

We're using Dexie where we're defining a database globally; https://dexie.org/docs/Tutorial/React#3-create-a-file-dbjs-or-dbts. Passing a custom indexedDB would require some test-only hackery which we'd like to avoid, but this is a possible fallback if all else fails. Either way, this setup does make it harder to reset the database, as we can't just change the indexedDB variable half way through. Since the definition is file-level, it's also persisted between tests.

I only get the error when running the auto scripts in either Storybook en Cypress. Maybe that's because it's executed in a .mjs file? I assumed the error was because of an error in the browser, since it refers to window and seems to run in the browser, but both Cypress and Storybook run several different kinds of processes (including node) in which code is executed so I can't say that for sure. I do know that my patch fixes it.

I get the same behavior as you when I do these tests in the console, but it also reveals that setting indexedDB like this doesn't work at all. I think using defineProperty should work correctly everywhere. It basically overwrites the property instead of using its setter to change its value (which as you saw doesn't even work in the browser at best, and crashes at worst).

My project works using the patch in the original message in combination with patch-package, so maybe the best course of actions is waiting until other people report in with this issue to get more info?

[julianCast]

On Chrome, running auto, throws the error "Cannot set property indexedDB of # which has only a getter". Changing the auto script like so fixed the issue for me: Would you be open to a PR?

Exact same issue for me, using react and localforage on gatsby project. I understand author's concern about the change but would be a neat PR (@MartijnHols ).