Home

I have been trying to get Vuex (inside of Nuxt.js) to work with a SQLite database using Bookshelf.js and Knex.js. I have been able to get Bookshelf to function outside of Nuxt, but when I put the same code inside of Nuxt, I get this in my browser console upon running a model:

bluebird.js:1542
Unhandled rejection TypeError: _this.driver.Database is not a constructor
    acquireRawConnection/<@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:38103:16
    acquireRawConnection@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:38102:12
    create@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:32558:9
    _createResource@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:29271:3
    dispense@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:29231:5
    acquire@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:29353:3
    acquireConnection/<@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:32608:7
From previous event:
    acquireConnection@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:32599:12
    ensureConnection/</<@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:42442:16
From previous event:
    ensureConnection/<@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:42440:35
From previous event:
    ensureConnection@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:42439:12
    run@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:42285:37
    ["./node_modules/knex/lib/interface.js"]/exports.default/Target.prototype.then@http://localhost:3000/_nuxt/pages/testing.e359f91ab7a42b76ee09.js:39654:18

I am using the same setup I used outside of Nuxt, but now it isn’t working. This makes me think that the issue is on Nuxt’s side.

P.S. If I am doing anything wrong or if there is a better way to achieve this (have Vuex interact with a database), please tell me

---

To reproduce error (may upload repo in the morning; getting late):

1. Make a new Nuxt project

vue init nuxt/starter bug-test
cd bug-test
npm install

2. Install Bookshelf, etc.

npm install bookshelf knex
npm install sqlite3@3.1.11 --save-exact # 3.1.12 causes bug which makes it impossible to `npm install`

3. Add database folder (for organization)

mkdir database
cd database

4. Add an empty SQLite database

sqlite3 db.sqlite
# SQLite version 3.20.1...
sqlite> create table blank; # not adding columns causes it to fail but still write a file; not best method but works
sqlite> .exit

5. Add Bookshelf.js files (add these to database/ directory; same as db.sqlite)
   1. knexfile.js

   module.exports = {
     client: 'sqlite3',
     connection: {
       filename: 'db.sqlite'
     },
     useNullAsDefault: true
   }
   

   2. bookshelf.js

   let knex = require('knex')(require('./knexfile'))
   
   let bookshelf = require('bookshelf')(knex)
   
   module.exports = bookshelf
   

   3. migrations/users.js

    exports.up = function (knex) {
      return knex.schema
        .createTable('users', table => {
          table.increments('id').primary()
          table.string('firstName')
          table.string('lastName')
          table.string('emailAddress')
        })
    }
   
    exports.down = function (knex) {
      return knex.schema
        .dropTable('users')
    }
   

   4. models/users.js

   var bookshelf = require('../bookshelf')
   
   var Users = bookshelf.Model.extend({
    tableName: 'users'
   })
   
   module.exports = Users
   

6. Add new page

<template lang="html">
  <section>
    <h1>Testing Page</h1>
    <pre>{{users}}</pre>
  </section>
</template>

<script>
import Users from '~/database/models/users'

export default {
  computed: {
    users () {
      let users
      Users.fetchAll().then(function (contact) { users = contact.toJSON() })
      return users
    }
  }
}
</script>

7. Migrate and start it up

cd ../ # if still in database/ or pages/
./node_modules/.bin/knex migrate:latest --knexfile database/knexfile.js
npm run dev

8. Open http://localhost:3000/testing (or whatever you called your page) in a browser and open console

---

Any help/feedback appreciated