Undefined $this within pusher-js when rendering Pusher component

[natembennett]

When I try to render a Pusher component, I receive this error:

TypeError: Cannot set property 'key' of undefined

Pusher node_modules/pusher-js/dist/web/pusher.js:155

  152 |   logger_1["default"].warn("You should always specify a cluster when connecting. " + suffix);
  153 | }
  154 | 
> 155 | this.key = app_key;
      | ^  156 | this.config = Collections.extend(DefaultConfig.getGlobalConfig(), options.cluster ? DefaultConfig.getClusterConfig(options.cluster) : {}, options);
  157 | this.channels = factory_1["default"].createChannels();
  158 | this.global_emitter = new dispatcher_1["default"]();

My implementation:

import Pusher from 'pusher-js';
import { setPusherClient } from 'react-pusher';

    constructor(props){
        super(props);
        this.pusherClient = new Pusher("bf5df34b3b535a270b0a", {
            cluster: "us2",
        });
    }

    render(){
        setPusherClient(this.pusherClient);
        return (
            <Flexbox>
                <Pusher
                    channel="someChannel"
                    event="listChanged"
                />
            </Flexbox>
        )
    }

I'm assuming this is due to instantiating setPusherClient incorrectly?

[marvin-rfbot[bot]]

Thanks for opening this issue!

[prayogoa]

setPusher only needs to be called once in the application's lifetime. Try moving the call outside of render to see if it fixes the problem

[Messhias]

setPusher only needs to be called once in the application's lifetime. Try moving the call outside of render to see if it fixes the problem

Even in event componentDidMount or componentDidUpdate life cycles functions the still persist.

[prayogoa]

It's not necessary to couple the instantiation of the pusher client to a component / it's lifecycle. Try calling it in the application driver, such as before you call ReactDom.Render.

[Messhias]

It's not necessary to couple the instantiation of the pusher client to a component / it's lifecycle. Try calling it in the application driver, such as before you call ReactDom.Render.

The only solution for me is was removing the:

<Pusher
       channel="someChannel"
       event="listChanged"
  />

And work as the documentation recommended. The component is not working at all, and some channels is dynamic and I need pass some id or specific so I need to initiate after the componentDidUpdate life cycle.

And even calling before of ReactDom.render the issue persist.

For me at least was better working with pure JavaScript and stop calling as component.