When the database is manually deleted and re-populated without refreshing the page, it will return duplicated data, even though the chrome inspector shows there are no duplicated data in the IndexedDB. There are no issues if you refresh the page right away database deletion.

This is the function to clear the database:

function deleteDB(){
  await db.delete();
  await db.open();
}

And this listener should run on deleting the database:

export class MySubClassedDexie extends Dexie {
    constructor() {
      playlists: "++id,*competitionIds",
     });
   }
}


db.on("populate", async () => {
  await db.playlists.bulkAdd(defaultPlaylists);
});

It looks like the only way to prevent duplicated data without refreshing is to use await db.playlists.bulkPut(defaultPlaylists);.

Can anyone figure out why?