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.