I have created a IndexedDB setup in my ReactJs PWA.

The following error is thrown:

NotFoundError: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.

at line userSearchDBtx = userSearchDB.transaction("userdata","readwrite")

My function looks like this:

function Users() {
  let userSearchDB,userSearchDBstore,userSearchDBtx;
  let userDbrequest = window.indexedDB.open("MyTestDatabase", 1);

useEffect(()=>{
  if (!window.indexedDB) {
      console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
  }

  else console.log("IndexedDB supported")

  userDbrequest.onupgradeneeded = function(event) { 
    userSearchDB = event.target.result;
    userSearchDBtx = event.target.transaction;
    userSearchDBstore = userSearchDB.createObjectStore("userdata",{keyPath:"uid"})
  };

  userDbrequest.onerror = function(event) {
    console.log("ERROR: " + event.target.errorCode)
  };

  userDbrequest.onsuccess = function(event) {
    console.log("IndexdDb Working")
    userSearchDB = event.target.result
    userSearchDBtx = userSearchDB.transaction("userdata","readwrite");
    userSearchDBstore = userSearchDBtx.objectStore("userdata");
  };
  //Here also put is unknown
  userSearchDBstore.put({uid:3854238974,phone:3257777,name:"shan",email:"[email protected]"})

},[])

}

I have created a IndexedDB setup in my ReactJs PWA.

The following error is thrown:

NotFoundError: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.

at line userSearchDBtx = userSearchDB.transaction("userdata","readwrite")

My function looks like this:

function Users() {
  let userSearchDB,userSearchDBstore,userSearchDBtx;
  let userDbrequest = window.indexedDB.open("MyTestDatabase", 1);

useEffect(()=>{
  if (!window.indexedDB) {
      console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
  }

  else console.log("IndexedDB supported")

  userDbrequest.onupgradeneeded = function(event) { 
    userSearchDB = event.target.result;
    userSearchDBtx = event.target.transaction;
    userSearchDBstore = userSearchDB.createObjectStore("userdata",{keyPath:"uid"})
  };

  userDbrequest.onerror = function(event) {
    console.log("ERROR: " + event.target.errorCode)
  };

  userDbrequest.onsuccess = function(event) {
    console.log("IndexdDb Working")
    userSearchDB = event.target.result
    userSearchDBtx = userSearchDB.transaction("userdata","readwrite");
    userSearchDBstore = userSearchDBtx.objectStore("userdata");
  };
  //Here also put is unknown
  userSearchDBstore.put({uid:3854238974,phone:3257777,name:"shan",email:"[email protected]"})

},[])

}

• javascript
• reactjs
• indexeddb

4 Answers 4

let userDbrequest = window.indexedDB.open("MyTestDatabase", 1);

Place this line in useEffect()

The code should be

let userSearchDB,userSearchDBstore,userSearchDBtx,userDbrequest;

useEffect(()=>{
   userDbrequest = window.indexedDB.open("MyTestDatabase", 2);
   ...Conrinue your code
},[])

Also, Increment the version while doing so

You are calling userSearchDBstore.put(...) before the db connected, which means no guarantee upgrade needed callback pleted, which means no guarantee store created.

You need to wait. Move the put call to within the open db request success callback so that it only runs once database is upgraded.

I found out the cause was the wrong storeNames at: const request = db .transaction(storeNames , "readwrite")

This happened for me because I was on localhost:3000. Try visiting $ip:3000 in your browser.

You can inspect your database endpoint in Chrome with Inspect -> Application -> Storage -> IndexedDB.