Feathersjs API ES6 class hooks and rest undefined

Question

I am setting up a feathers-client using a ES6 class which I want to import in the actions of my React-Redux-Webpack application.

I have setup a REST api using the awesome Feathers scaffold.

Unfortunately I get an error in the browser which is ruining my day. What am I doing wrong?

Uncaught TypeError: _client2.default.hooks is not a function

Can anyone help me out? Why are hooks (and also rest) undefined here? Packages seem to be installed properly...

Is the following a good idea?

// src/middleware/api.js

import hooks from 'feathers-hooks'
import feathers from 'feathers/client'
import rest from 'feathers-rest/client'

class API {
  constructor() {
    const connection = process.env.FEATHERS_API_URL
    this.app = feathers()
      .configure(feathers.hooks())
      .configure(rest(connection).fetch(fetch))
      .configure(feathers.authentication({
        type: 'local',
        storage: window.localStorage,
      }))
  }
}

Could it be that some packages aren't compatible?

"feathers": "^2.0.3",
    "feathers-authentication": "^0.7.12",
    "feathers-client": "^1.8.0",
    "feathers-configuration": "^0.3.3",
    "feathers-errors": "^2.5.0",
    "feathers-hooks": "^1.7.1",
    "feathers-rest": "^1.5.2",
    "feathers-sequelize": "^1.4.0"

Another thing I'm wondering about is do we always need to feed the rest function a path? Can it default to use the path used in the config files? Feeding it a path feels a bit weird having both my client and server side code in the same project...

Answer 1

@feathersjs/client is a bundle that includes a set of Feathers standard modules (like auth, rest, socketio clients) and can be used directly in the browser (see the documentation here).

It looks like you are trying to use a module loader which is documented here so instead of using the pre-bundled package (where everything is in the feathers. namespace like feathers.hooks, feathers.authentication etc.) you can import only the modules that you need and configure them:

  // src/middleware/api.js
  import feathers from '@feathersjs/feathers'
  import rest from '@feathersjs/rest-client'
  import authentication from '@feathersjs/authentication-client'

  class API {
    constructor() {
      const connection = process.env.FEATHERS_API_URL
      this.app = feathers()
        .configure(rest(connection).fetch(fetch))
        .configure(authentication({
          type: 'local',
          storage: window.localStorage,
        }))
    }
  }

rest does not require a base url if it is running on the same domain. It is an empty string by default.