search

disqus / disqus-react

A React component for Disqus
MIT License
365 stars 46 forks source link

Cannot Read Property appendChild of null #77

Closed ardalis closed 3 years ago

ardalis commented 4 years ago

Describe the bug

Disqus discussion not showing up on page; getting this error in console:

image

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://ardalis.com/data-access-principles/
  2. Open dev tools to see error. Note absence of Disqus on the page.

Expected behavior

Disqus on the page working.

Screenshots

See above.

tterb commented 4 years ago

@ardalis Thanks for the report! I'll investigate potential causes this evening and see if we can get this resolved asap.

tterb commented 4 years ago

@ardalis I tried to do some troubleshooting and it appears that the issue is occurring in the embed.js script, which is failing to find the #disqus_thread container on the page.
I can try to help you determine why this is happening if you can provide an example repo that can be used to reproduce the issue locally.

ardalis commented 4 years ago

Thanks, it's here:

https://github.com/ardalis/ardalis-com-gatsby

tterb commented 4 years ago

@ardalis When I spin up the site locally I'm seeing the Disqus thread load correctly, which makes me believe that the issue might be related to the isCmsPreview ternary that the DiscussionEmbed is being loaded within. Though, I admittedly don't know much about the CMS setup you're using. Have you tried pulling the DiscussionEmbed outside of the ternary and seeing if the thread is loaded in production?

tterb commented 3 years ago

This issue has gone quiet, so I'm gonna close it out for now.

acelaya commented 3 years ago

I have reproduced the same issue with latest version, 1.0.11

I'll investigate a bit further to see if I can reproduce the specific circumstances in which this happens, because it only happens with a certain combination of actions and not always.

This is the project in which I use this: https://github.com/acelaya/alejandrocelaya.blog

acelaya commented 3 years ago

Hey @tterb.

So, I have investigated a bit and the problem seems to be related with the fact that the insertScript function is being called by the DiscussionEmbed component (and probably CommentCount too), but providing the window.document.body object as the parent of the script.

The problem is that, if the bundled script is being loaded in the <head /> tag (which seems to be the default behavior in gatsby, which is being used by @ardalis, and next.js, which is used by me), then the body is null, causing this. This issue is probably the same https://stackoverflow.com/questions/9916747/why-is-document-body-null-in-my-javascript/9916754

In order to fix this I would suggest using a react reference to the element itself as the parent, instead of using the body. I'm using that approach here https://github.com/acelaya/alejandrocelaya.blog/blob/main/src/components/CarbonAds.tsx

I can provide a PR with the fix if needed.

tterb commented 3 years ago

@acelaya Thanks for tracking this down! I think your suggested solution sounds reasonable and PR's are always appreciated and can speed up the process.

I'll reopen this issue now so we can make sure it gets resolved.

acelaya commented 3 years ago

So, I have started implementing the fix, and I have found out a two things.

The first one is that the error is not actually thrown by this library. The appendChild executed in the insertScript function actually works, and the embed.js file gets properly loaded, which means the document.body object is not null as I suspected.

The error seems to be somewhere in the code loaded there, inside some recommendations.js file. See the stack trace:

image

Is this file also part of an open source project? I could try to continue digging there if so.

The second thing I have found is that using references as I suggested does fix the problem, but inderectly as it's clearly not addressing the root cause, it just happens to solve it.

Because of that, I don't think is the right way to go. Also, the tests break, and I need to investigate why.

So, @tterb what's your recommendation here. Should the issue be addressed in this recommendations.js file, or should I try to fix the tests and provide the change based on the use of react references?

tterb commented 3 years ago

@acelaya The recommendations.js is part of a new Disqus feature that allows publishers to load Recommendations as a standalone app (There is already #94 to add this functionality to this package). Though in an attempt to maintain the previous experience of loading Recommendations alongside the comment thread for publishers, the app can also be loaded adjacent to the comment thread by the embed.js script based on the publisher's settings. This is what appears to be causing the issue you are seeing.

I'm going to take a look at this issue today and see if I can track down the underlying cause in the Disqus application.

tterb commented 3 years ago

@acelaya A potential fix was deployed earlier today that should resolve the issue you were experiencing. I'm no longer seeing the error on the site you linked, but I'll wait on your confirmation to close this issue out.

acelaya commented 3 years ago

Yep, I can't reproduce it anymore and the comments load properly every time.

Thanks!

tterb commented 3 years ago

@acelaya Great! Thanks for your help reporting and diagnosing this issue!