Static GitHub Issues

[1747] TypeError when using Bookshelf.js

prev: How do I throw a 404 in a dynamic route when when id does not exist?
next: Webpack doesn't load images from `assets` if using template literals

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
  1. 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`
  1. Add database folder (for organization)
mkdir database
cd database
  1. 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
  1. 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')
     }
    1. models/users.js

      var bookshelf = require('../bookshelf')
      
      var Users = bookshelf.Model.extend({
       tableName: 'users'
      })
      
      module.exports = Users
  2. 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>
  1. 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
  1. Open http://localhost:3000/testing (or whatever you called your page) in a browser and open console

Any help/feedback appreciated

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1569">#c1569</a>)</em></sub></div>