s-yadav / react-meta-tags

Handle document meta/head tags in isomorphic react with ease.
MIT License
226 stars 47 forks source link

Uncaught TypeError: cannot read property 'children' of null #27

Closed AakashGfude closed 5 years ago

AakashGfude commented 5 years ago

For line 109 in lib/meta_tags.js :- var childNodes = Array.prototype.slice.call(_this.temporaryElement.querySelector('.react-head-temp').children);

I am getting Cannot read property 'children' of null. This line also needs to be handled ?

Is it because I did not use id in metatags as you had mentioned in Note : Define id on tags so if you navigate to other page, older meta tags will be removed and replaced by new ones.

this error comes when i update the description or title of the page. In that case, should i use id as like :- <title id="title-tag">{this.props.title}</title>

Originally posted by @AakashGfude in https://github.com/s-yadav/react-meta-tags/issues/25#issuecomment-447718523

s-yadav commented 5 years ago

@AakashGfude Having Id is not required. And also this.temporaryElement.querySelector('.react-head-temp') will always be available. Can you share code sample with which I can reproduce this. Also it will be great if you can setup a codesandbox which has this error. It will be easier for me to debug.

AakashGfude commented 5 years ago

My code for metatag is the minimal one :-

`class MetaTag extends Component {

     render() {
        return (
           <div>
              <MetaTags>
                  <title>{this.props.title}</title>
                  <meta name="description" content={this.props.description} />
                  <meta property="og:title" content={this.props.title} />
                  <meta property="og:description" content={this.props.description} />
             </MetaTags>
           </div>
       )
    }
 }`

The situation arises, when I update the description tag, which is done by editing the summary of an article. The summary of the article is sent as a description tag to metaTags component. I will try to replicate the scenario, but it might be difficult as there are a lot of mounting and unmounting of components involved. Can you give me a heads up of what this class 'react-head-temp' is , or any other tips.

Thanks

UwUnyaa commented 5 years ago

I'm getting this exact error, and it seems that react-meta-tags just doesn't test whether Element.querySelector() returns a DOM node or null, and crashes in the latter case. I can provide a PR if needed.

UwUnyaa commented 5 years ago

I provided a PR with the fix here: https://github.com/s-yadav/react-meta-tags/pull/29