Feathers-vuex: TypeError: Class constructor BaseModel cannot be invoked without 'new'

[morphatic]

Steps to reproduce

Using v2.0.0-pre.62 (for real this time 😎). I'm getting the error TypeError: Class constructor BaseModel cannot be invoked without 'new'. The error is being thrown at service-module.actions.ts#L277.

I put a break in at that line in the code and found that the fetch operation is successful. An array of objects has been returned by the API and the error happens when trying to convert them into model instances. This Stack Overflow post suggests that the issue may be caused by the Babel target preset. It indicates that this preset should be changed from es2015 to node, but TBH, I am not comfortable or familiar enough with how Babel works to know if this is really the issue.

Here are the snippets of my current setup. The full repo is available here.

My Feathers client setup:

// src/services/api.js
import feathers from '@feathersjs/feathers'
import auth from '@feathersjs/authentication-client'
import feathersVuex from 'feathers-vuex'
import socketio from '@feathersjs/socketio-client'
import io from 'socket.io-client'

const app = feathers()
const socket = io(process.env.VUE_APP_API_URL)
app.configure(socketio(socket))

const api = app

const {
  makeServicePlugin,
  BaseModel,
  models,
  clients,
  FeathersVuex
} = feathersVuex(app, { serverAlias: 'api' })

export {
  api,
  FeathersVuex,
  BaseModel,
  clients,
  makeServicePlugin,
  models
}

My model class setup:

// src/store/services/artifacts.js
import { api, makeServicePlugin, BaseModel } from '@/services/api'

class Artifact extends BaseModel {
  static modelName = 'Artifact'
  // eslint-disable-next-line
  constructor (data, options) {
    super(data, options)
  }
  static instanceDefaults = () => ({
    createdAt: null,
    name: null,
    narrative: null,
    notes: [],
    status: 'draft',
    tags: [],
    updatedAt: null,
    uri: null,
    userId: null
  })
}

const servicePath = 'artifacts'
const servicePlugin = makeServicePlugin({
  Model: Artifact,
  service: api.service(servicePath),
  servicePath
})

export default servicePlugin

Store setup:

import Vue from 'vue'
import Vuex from 'vuex'
import { FeathersVuex } from 'feathers-vuex'
import { api as appAPI } from '@/services/api'
import auth from '@/store/modules/auth'
import common from '@/store/modules/common'
import user from '@/store/modules/user'

// register Vue plugins
Vue.use(Vuex)
Vue.use(FeathersVuex)

// passthrough export of key objects
export const api = appAPI

// get the API service plugins
const requireModule = require.context('@/store/services', false, /.js$/)
const apiPlugins = requireModule.keys().map(path => requireModule(path).default)

export const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    // artifacts,
    auth,
    common,
    user
  },
  plugins: [
    ...apiPlugins
  ]
})

Finally, some snippets from the component that's causing the error to be thrown (using <feathers-vuex-find>):

// src/components/pages/artifacts/TheArtifactsPage.vue
<template>
  ...
    <feathers-vuex-find
      :fetch-query="{ userId: $store.state.auth.apiId, $limit: -1 }"
      :query="query"
      service="artifacts"
    >
      <v-data-table
        slot-scope="{ items: artifacts }"
        :items="artifacts"
        item-key="_id"
      >
        ...
      </v-data-table>
    </feathers-vuex-find>
  ...
</template>

I'm hoping that I just have a configuration error somewhere. Changing the Babel config seems like it could have serious ripple effects.

• [x] Tell us what broke. The more detailed the better.
• [ ] If you can, please create a simple example that reproduces the issue and link to a gist, jsbin, repo, etc.

Expected behavior

The retrieved artifacts should be displayed

Actual behavior

TypeError: Class constructor BaseModel cannot be invoked without 'new'

System configuration

Tell us about the applicable parts of your setup.

Module versions (especially the part that's not working): v2.0.0-pre.62

NodeJS version: v10.15.3

Operating System: OSX 10.13.6 (High Sierra)

Browser Version: Chrome (mac) 75.0.3770.100

Module Loader: Vue v2.6.10, Vuex v3.1.1

[marshallswain]

Please look at the solutions that are discussed in the PR: https://github.com/feathers-plus/feathers-vuex/pull/216

I recommend looking at the comment by @t2t2, first.

[marshallswain]

Basically, you need to add feathers-vuex to the transpileDependencies key in the vue.config.js file.

[morphatic]

This works! I tried adding just feathers-vuex but ended up having to add all 3 of the ones @t2t2 specified. I also added the sourceType: 'unambiguous' key to the babel config as well. I'm always amazed at how many things about the Vue ecosystem I still have to learn. I'm going to go back and study all of the available vue.config.js props again to brush up.

Thanks, as always, for the lightning fast response.

[smyth64]

@marshallswain @morphatic
When I do this using NuxtJS and the latest version I get these warnings:

 WARN  in ./node_modules/feathers-vuex/dist/service-module/service-module.mutations.js

"export 'default' (imported as '_isObject') was not found in 'lodash/isObject'


 WARN  in ./node_modules/feathers-vuex/dist/utils.js

"export 'default' (imported as '_trim') was not found in 'lodash/trim'

Hmm =/

[marshallswain]

Can you confirm the exact version number of the feathers-vuex package you have installed?

[smyth64]

Yes it is v2.0.0-pre.77

[smyth64]

@marshallswain I solved it copying feathers-vuex in my libs folder and directly import it from there :)

[apmcodes]

For Quasar app transpileDependencies can be updated in quasar.conf.js under build as

transpileDependencies: ['feathers-vuex'],

[apmcodes]

Getting the below error on on adding transpileDependencies, while upgrade to 2.0.1

quasar dev

 Dev mode.......... spa
 Pkg quasar........ v1.2.4
 Pkg @quasar/app... v1.2.2
 Debugging......... enabled

 app:quasar-conf Reading quasar.conf.js +0ms
 app:dev Checking listening address availability (0.0.0.0:8001)... +6ms
 app:webpack Extending SPA Webpack config +420ms
 app:generator Generating Webpack entry point +5ms
 app:dev-server Booting up... +4ms


 SPA █████████████████████████ [100%] in ~18s



 WARNING  Compiled with 6 warnings                                                                   7:11:29 AM

 warning  in ./node_modules/feathers-vuex/dist/utils.js

"export 'default' (imported as '_isObject') was not found in 'lodash/isObject'

 warning  in ./node_modules/feathers-vuex/dist/utils.js

"export 'default' (imported as '_isObject') was not found in 'lodash/isObject'

 warning  in ./node_modules/feathers-vuex/dist/utils.js

"export 'default' (imported as '_isObject') was not found in 'lodash/isObject'

 warning  in ./node_modules/feathers-vuex/dist/service-module/service-module.mutations.js

"export 'default' (imported as '_isObject') was not found in 'lodash/isObject'

 warning  in ./node_modules/feathers-vuex/dist/service-module/service-module.mutations.js

"export 'default' (imported as '_isObject') was not found in 'lodash/isObject'

 warning  in ./node_modules/feathers-vuex/dist/utils.js

"export 'default' (imported as '_trim') was not found in 'lodash/trim'

[apmcodes]

Seems feathers-vuex was not installed properly or latest version. Removed it from package.json and did npm install --save and error went away.