Dexie.js indexedDB can't find specified object

Question

I'm adding a indexedDB in my Vue + Laravel application, here's the code that I'm currently using:

  export default {
      mixins: [VueGoogleMap.MapElementMixin],
      created() {
          this.eventBus.$on("refresh-map", () => {
              this.fetchHexagons();
          });

          const getAllBuildings = () => Vue.http.get("/sandbox/buildings");

          getAllBuildings().then((result) => {
              const async = Dexie.async;
              const spawn = Dexie.spawn;

              const db = new Dexie("buildings");

              db.version(1).stores({
                  buildings: `++dexie_id, id, name, address, city, nr_units, lat, long, purchased`,
              });

              db.transaction("rw", db.buildings, function* () {
                  result.body.forEach(function*(el) {
                      const a = yield db.buildings.add({
                          id: el.id,
                          name: el.name,
                          address: el.address,
                          city: el.city,
                          nr_units: el.nr_units,
                          lat: el.lat,
                          long: el.long,
                          purchased: el.purchased,
                      });
                  });

                  console.log("done");

              }).catch(function(err) {

                  // Catch any error event or exception and log it:
                  console.error(err.stack || err);
              });

As you can see, I'm querying the DB in order to transfer all the buildings in the indexedDB, in order to parse them faster (I need to display them in a map..). The problem is that when I run this code I get the following error:

CanvasOverlay.vue?e208:68 Error: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.
    at Transaction.create (dexie.es.js?f8d5:2900)
    at eval (dexie.es.js?f8d5:2222)
    at eval (dexie.es.js?f8d5:1343)
    at callListener (dexie.es.js?f8d5:1026)
    at endMicroTickScope (dexie.es.js?f8d5:1113)
    at IDBOpenDBRequest.eval (dexie.es.js?f8d5:1180)

The only package I have installed is Dexie:

npm install --save dexie

Do I need to install something more or it might be a Webpack problem?

Answer 1

Try to delete the database and re-run the code. This issue is quite common and happens when a same version (1) is updated without incrementing version number according to these docs.

Also, I see another error - you cannot use function* from a forEach() call. Instead use:

    for (let el of result.body) {
      ...
    }

or even better:

const itemsToAdd = result.body.map(el => ({
                          id: el.id,
                          name: el.name,
                          address: el.address,
                          city: el.city,
                          nr_units: el.nr_units,
                          lat: el.lat,
                          long: el.long,
                          purchased: el.purchased,
                      }));
return db.buildings.bulkAdd(itemsToAdd);