rainforestapp / react-pusher

A react component for handling pusher subscriptions
MIT License
52 stars 16 forks source link

Undefined $this within pusher-js when rendering Pusher component #18

Open natembennett opened 5 years ago

natembennett commented 5 years ago

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] commented 5 years ago

Thanks for opening this issue!

prayogoa commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.