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

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.

• 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]

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

[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.