8

I have a website on Backbone. When I try to execute Disqus code i get

Uncaught TypeError: Cannot read property 'appendChild' of null

How can I fix it? Why is this happening?

var disqus_shortname = 'mysite';

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
  var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
  dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

console:

undefined
embed.js:1 Unsafe attempt to redefine existing module: BASE
embed.js:1 Unsafe attempt to redefine existing module: apps
embed.js:1 Unsafe attempt to redefine existing module: get
...

embed.js:1 Unsafe attempt to redefine existing module: configAdapter
embed.js:1 Unsafe attempt to redefine existing module: removeDisqusLink
embed.js:1 Unsafe attempt to redefine existing module: loadEmbed
embed.js:1 Unsafe attempt to redefine existing module: reset
embed.js:1 Uncaught TypeError: Cannot read property 'appendChild' of null
1
  • seems you have not define either head or body tag in your HTML.
    – FatalError
    Jun 1, 2015 at 13:48

3 Answers 3

21

For those just finding this in 2015, in addition to occurring when "head" or "body" is missing, this error will occur when you do not have the following div somewhere in your page:

<div id="disqus_thread"></div>

Put that div where you want the disqus thread to actually appear.

1
  • 6
    This fixed a similar issue for me. I had the "appendChild of null" error and I just realized I included the disqus script everywhere but didn't have the comments on each page. Now I just wrapped the code in if($("#disqus_thread").length){ ... } and I'm fine.
    – June
    Oct 2, 2015 at 19:01
3

It appears your document is missing both a head and a body for some reason.

Try this:

(function() {
    var dsq = document.createElement('script');
    var head = document.getElementsByTagName('head')[0];
    var body = document.getElementsByTagName('body')[0];

    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

    console.log('head', head);
    console.log('body', body);

    (head || body).appendChild(dsq);
}());

Then look in the console.

11
  • But still logs "Uncaught TypeError: Cannot read property 'appendChild' of null"
    – derzunov
    Jun 1, 2015 at 14:18
  • this error from embed.js screenshot - cloud.mail.ru/public/9iFg/8t8pomZXd
    – derzunov
    Jun 1, 2015 at 14:20
  • Yes we would need more information to solve your problem, this answer was to help you diagnose what is wrong. Above the error, do you see anything next to "head" or "body"? What do you see if you write document.getElementsByTagName('head')[0] directly there in the console? Jun 1, 2015 at 14:22
  • Head and body exists.
    – derzunov
    Jun 1, 2015 at 14:30
  • Ok, but do head and body exist when logged from within that function? Jun 1, 2015 at 14:33
2

I've solved like this:

// Only if disqus_thread id is defined load the embed script
if (document.getElementById('disqus_thread')) {
    var your_sub_domain = ''; // Here goes your subdomain
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + your_sub_domain + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}

Thx to @boutell and @June for the clue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.