Error when meta content includes quote

[zhangciwu]

Version: v3.0.0
Error stack:

index.esm.js?d732:58 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': 'meta[property="og:title"][content=""Có tâm" như Lý Quý Khánh chụp ảnh cho Hà Hồ: Lần nào cũng hết hồn chim én!"][data-rh=""]' is not a valid selector.
    at HeadTag.componentDidMount (webpack-internal:///./node_modules/react-head/dist/index.esm.js:74:33)
    at commitLifeCycles (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14361:22)
    at commitAllLifeCycles (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15462:7)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:100:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:138:16)
    at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:187:29)
    at commitRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:15603:7)
    at completeRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16618:34)
    at performWorkOnRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16563:9)
    at performWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16482:7)

Quite serious that page just gone white.

It seems cause of meta content which include double quote mark(")
Maybe do not use content as part of querySelector? (or perform suitable escaping before query)

And, I only want head tags performs on server, and leave it alone at client side (My MPA do not use front-ending routing), Maybe add some option to do this.

[zhangciwu]

My workaround:

import {createElement} from 'react';
import {HeadTag, Meta} from 'react-head';

const HeadTagSsrOnly = HeadTag;

// remove all client refresh actions.
HeadTagSsrOnly.prototype.componentDidMount = () => {
  // nothing
};

HeadTagSsrOnly.prototype.componentWillUnmount = () => {
  // nothing
};

export { HeadTagSsrOnly};

Only for MPA without front-ending routing

[TrySound]

@tizmagik Seems like there is something wrong with selector builder

[tizmagik]

Yea, this is the same issue as #16 -- I think we just need to escape the selector

[zhangciwu]

Using content as query isn't quite smart( content can be various and very long)
Maybe react's key mechanism is a good solution
Require key when insert head tags and using it to manipulate dom then

[tizmagik]

We need some kind of deterministic key that we are aware of/control on both server and client side — open to suggestions!

Edit: Hm, actually maybe we only need to know that react-head places the tags, so maybe we don’t need such a deterministic key?

[zhangciwu]

Seems buildSelector is used to remove SSR tags only,
Maybe just tagging SSR tags for all (like add a "ssr" attribute to the html)
And at client just remove all tags with that attribute

Need to select a name that will not be used by others, like "__ssr__" (kind of python style)

[TrySound]

We already use data-rh by the way

[zhangciwu]

So just delete all document.querySelectorAll('head [data-rh]') to remove SSR tags?

[tizmagik]

I think so, that should work. Would you be able to submit a PR and try it out?

[tizmagik]

This is now fixed with the latest v3.0.0 release. Please feel free to open a new issue if there's still any problems.