Disqus's count.js script doesn't run properly in index.html with react.js website

Question

I've been having a hell of a time getting the comment count script to work on my react pages. To start, they recommend putting the script in my index.html file, at the bottom of the <body> tag. I've done this, and seen no result.

  <body>
    <div id="app">
    </div>
    <script src="static/index.js"></script>
    <script id="dsq-count-scr" src="//mtg-hunter.disqus.com/count.js" async></script>
  </body>

I have an index.js file which is loading all my components, including the component (let's call it ResultComponent.js) which I want to have the comment count <span> tags in. The <span> tags themselves look like this:

var commentCount = <span className="disqus-comment-count" onClick={function() {this.setState({currentSelectedTab: 4})}.bind(this)} 
   data-disqus-identifier={idGoesHere}
   style={{fontVariant:"small-caps"}}>0 Comments</span>

So far, so simple. I'm not using any <a> tags so I haven't got #disqus_thread anywhere. When I load my page, I expect my comment count to go up, but no such luck. To test this, I copied the raw script, unaltered, from the raw count.js script (which is located here). I then pasted it straight into Chrome's devtools console, and it worked; all the relevant comment counters went to their appropriate values.

EDIT: a day later, more prodding; I added breakpoints in the actual code in the disqus.com domain. The script in the script tag is running just fine at the right time, except it's missing variables when it enters the displayCount() function. There's several variables that just aren't given values so it can't go in and populate the comment counts, it always fails out. I have no idea why this fails when it's called from within my index.html but not when I paste the raw count.js code into my console and do it there. No idea why.

To clarify, this is the relevant code:

e.displayCount = function(b) {
        for (var c, a, d, e = b.counts, b = b.text.comments; c = e.shift(); )
            if (a = j[c.id]) {
                switch (c.comments) {
                case 0:
                    d = b.zero;
                    break;
                case 1:
                    d = b.one;
                    break;
                default:
                    d = b.multiple
                }
                c = d.replace("{num}", c.comments);
                a = a.elements;
                for (d = a.length - 1; d >= 0; d--)
                    a[d].innerHTML = c
            }
    }
    ;

When it runs properly, from my pasting the script into the console, the j variable is defined. When it runs called from index.html, j is undefined, so it fails at the first if. The calling url is exactly the same in both situations:

http://mtg-hunter.disqus.com/count-data.js?1=19767&1=235597&1=373322&1=382310&1=382841&1=382866&1=383023&1=397543&1=397682&1=398434

. That gives the b parameter, and when I run the script locally it defines j so that the assignment operator in the if can work (which is a really weird way of doing it, but ok).

edit again: I should point out I'm doing this on a local test server (localhost:3000), not sure if that makes a difference or not?

edit more: The answer to my above question turns out to be 'no'. I uploaded my code to my server and the production site also showed that the script wasn't running properly. This is absurd... I'm out of ideas by now.

edit again more: Partial breakthrough... I added this code to ResultComponent.js:

    componentDidMount() {
     DISQUSWIDGETS.getCount();
    },

    componentDidUpdate() {
     DISQUSWIDGETS.getCount();
    },

Good news; when I refresh the page, it shows the right comment count! Hooray! Bad news: when I change parts of the page that hide the Result component, and then bring it back (triggering componentDidUpdate), the DISQUSWIDGETS.getCount() call doesn't work. It still gets called, but the displayCount part of the script never does, so the DOM is never updated with the new information. It's yet another example of this horrid script behaving differently despite being called in exactly the same way...

Seems like reactjs may be doing something to your expected context. Can you adjust `displayCount` such that you can pass `j` as an additional argument? — Ouroborus, May 09 '16 at 00:35
No, this is a script that's loaded/created by disqus and it sits at mtg-hunter.disqus.com/count.js. — IronWaffleMan, May 09 '16 at 01:17
While not the best solution, it looks like you can update the code. After `count.js` has loaded, assign `DISQUSWIDGETS.displayCount` to a function more to your taste. Or even create a local copy of `count.js` and modify and link to that. At minimum, this might help with debugging. — Ouroborus, May 09 '16 at 01:43

IronWaffleMan · Accepted Answer · 2016-05-09T17:19:23.703

OK, after much back and forth with the support guy at Disqus I finally found an answer; I was close. The solution is:

    componentDidMount() {
     DISQUSWIDGETS.getCount({reset:true});
    },

    componentDidUpdate() {
     DISQUSWIDGETS.getCount({reset:true});
    },

Turns out I had to pass the reset:true param, which enabled a chunk of code in getCount to actually do something. I suppose I could've figured that out from the code, but I blame the intensely minified formatting (even with chrome dev tools helping to prettify it) for me missing that. It was also in their knowledge base article for how to add comment counters, but I missed the context of it (and got absorbed by the 'fact' that 'it obviously had to be the script not working, clearly').

And so ends one of my most frustrating few days of coding. And a useful lesson... step back and look at the big picture every now and again, because the answer can be staring you in the face.

Disqus's count.js script doesn't run properly in index.html with react.js website

1 Answers1