Can't add html comments in _document.js #3904

shanedaugherty · 2018-02-27T01:48:57Z

Can't add html comments in _document.js, I believe this is just a something that isn't possible with jsx, but wondering if there may be a workaround.

The reason I need to do this is because google is trying to index urls that are in the __NEXT_DATA__ object and I'd like to wrap the whole script tag in .

The text was updated successfully, but these errors were encountered:

dbrodie122 · 2018-02-28T00:01:04Z

You can write comments in JSX by wrapping them in curly braces. But keep in mind you have to return a single element from React components.

This works:

const MyComponent = (props) => {
  return (
    <div>
      {/*This is a comment*/}
      Some Text
    </div>
  )
}

This will cause an error:

const MyComponent = (props) => {
  return (
      {/*This is a comment*/}
    <div>
      Some Text
    </div>
  )
}

ghost · 2018-02-28T00:05:57Z

Hey @dbrodie122 dbrodie122 thanks for the input but I need an html comment to appear in the dom / server side rendered html. Jsx comments don't make it into the dom.

Example: 

I think it's the ! that causes issues.

haohcraft · 2018-02-28T03:23:34Z

Have you tied this in your own _document.js?

export default class MyDocument extends Document {
	render() {
		return (
			<html lang="en">
				<Head />
				<body>
					<div className="root">{"you main app"}</div>
					<script dangerouslySetInnerHTML={{ __html: `<!--googleoff: all-->` }} />
					<NextScript />
					<script dangerouslySetInnerHTML={{ __html: `<!--googleon: all-->` }} />
				</body>
			</html>
		);
	}
}

So later in DOM, it would be like

<script><!--googleoff: all--></script>
<script> __NEXT_DATA__  = xxxx</script>
<script><!--googleon: all--></script>

Since google would crawl the document as a plain text, feels like this would work.

shanedaugherty · 2018-02-28T03:33:17Z

Pretty clever @haohcraft . That does the trick. Thanks 🙏

miwialex · 2018-12-05T22:37:15Z

I also need to do this, but unfortunately can't be inside a script tag. Its something that needs to be injected right into the header. I'm using nginx to do virtual includes so it needs to look like

any thoughts?

craigcbrunner · 2018-12-16T23:01:45Z

I also need what miwialex is saying too... Not inside a script tag... Can't figure out a way.

craigcbrunner · 2018-12-17T04:04:22Z

@miwialex I figured out a way to do this, hackily tonight.. I had a huge issue with JSS and Emotion conflicting and needed to add a comment which JSS references to change the insertion order of the CSS... Anyways long story short what worked for me is this, in my _document.js

Basically above my (the Next.js HEAD component), I added this:

      <head dangerouslySetInnerHTML={{ __html: '<!-- jss-insertion-point -->' }}>
      </head>

Then everything in the HEAD component got appended after that, which worked for my use case, at least in chrome, I haven't tested other browsers...

So for me it looks like this:

class MyDocument extends Document {
  constructor(props) {
    super(props);
    const { __NEXT_DATA__, ids } = props;
    if (ids) {
      __NEXT_DATA__.ids = ids;
    }
  }

  render() {
    const { pageContext } = this.props;

    return (
      <html lang="en" dir="ltr">
      <head dangerouslySetInnerHTML={{ __html: '<!-- jss-insertion-point -->' }}>
      </head>
        <Head>
          <meta charSet="utf-8" />
          {/* Use minimum-scale=1 to enable GPU rasterization */}
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
          />
          .... other crap removed to shorten this.

        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

doronnac · 2018-12-17T20:48:39Z

@craigcbrunner @haohcraft You both deserve a medal, spent so much time trying to figure this out. Thank you.

jlbovenzo · 2019-02-05T22:16:09Z

@craigcbrunner To change the CSS injection order, I followed this steps:

add a noscript tag inside Head component (_document.js)

return (
  <html lang="en" dir="ltr">
    <Head>
    	.
    	.
    	.
      <noscript id="jss-insertion-point"></noscript>
      .
      .
      .
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </html>
);

specify in JSS create method the element created (_app.js)

const jss = create({
  insertionPoint: process.browser ? document.getElementById('jss-insertion-point') : null,
});

shanedaugherty closed this as completed Feb 28, 2018

timneutkens mentioned this issue Mar 6, 2018

Can't insert comment in head _document (styled_componet, jss) #3943

Closed

lock bot locked as resolved and limited conversation to collaborators Feb 5, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can't add html comments in _document.js #3904

Can't add html comments in _document.js #3904

shanedaugherty commented Feb 27, 2018

dbrodie122 commented Feb 28, 2018

ghost commented Feb 28, 2018

haohcraft commented Feb 28, 2018

shanedaugherty commented Feb 28, 2018

miwialex commented Dec 5, 2018

craigcbrunner commented Dec 16, 2018

craigcbrunner commented Dec 17, 2018

doronnac commented Dec 17, 2018

jlbovenzo commented Feb 5, 2019 •

edited

Loading

Can't add html comments in _document.js #3904

Can't add html comments in _document.js #3904

Comments

shanedaugherty commented Feb 27, 2018

dbrodie122 commented Feb 28, 2018

ghost commented Feb 28, 2018

haohcraft commented Feb 28, 2018

shanedaugherty commented Feb 28, 2018

miwialex commented Dec 5, 2018

craigcbrunner commented Dec 16, 2018

craigcbrunner commented Dec 17, 2018

doronnac commented Dec 17, 2018

jlbovenzo commented Feb 5, 2019 • edited Loading

jlbovenzo commented Feb 5, 2019 •

edited

Loading