Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dangerouslySetInnerHTML does not work on production builds #11108

Closed
tbinte opened this issue Jan 16, 2019 · 12 comments
Closed

dangerouslySetInnerHTML does not work on production builds #11108

tbinte opened this issue Jan 16, 2019 · 12 comments

Comments

@tbinte
Copy link

@tbinte tbinte commented Jan 16, 2019

I'm transforming and adding frontmatter content from markdown to html to my page, with the help of showdown. Its working on develop builds, unfortunately in production builds the content is missing.

Here's the page code:

import React from "react";
import { Container, Col, Row } from "reactstrap";
import Grid3Column from "../components/Grid3Column";
import FullPageImg from "../components/FullPageImg";
import Metadata from "../components/Metadata";
import Accordeon from "../components/Accordeon";
import showdown from "showdown";

const converter = new showdown.Converter();

const IndexPage = ({ data }) => {
  const { frontmatter } = data.markdownRemark;
  return (
    <Container className="body__main">
      <Metadata
        title={frontmatter.title}
        description={frontmatter.description}
      />
      <Row>
        <Col>
          <h1 className="mainheader">{frontmatter.heading}</h1>
        </Col>
      </Row>
      <Row className="mb-4">
        <Col>
          <p
            dangerouslySetInnerHTML={{
              __html: converter.makeHtml(frontmatter.bodycopy1)
            }}
          />
        </Col>
      </Row>

      <FullPageImg image1={frontmatter.banner1.image1} />

      <Grid3Column
        callout1={frontmatter.grid1.callout1}
        callout2={frontmatter.grid1.callout2}
        callout3={frontmatter.grid1.callout3}
        image1_1={frontmatter.grid1.image1_1}
        image1_2={frontmatter.grid1.image1_2}
        image2_1={frontmatter.grid1.image2_1}
        image2_2={frontmatter.grid1.image2_2}
        image3_1={frontmatter.grid1.image3_1}
        image3_2={frontmatter.grid1.image3_2}
      />

      <Row className="mt-4">
        <Col>
          <p
            dangerouslySetInnerHTML={{
              __html: converter.makeHtml(frontmatter.bodycopy2)
            }}
          />
        </Col>
      </Row>

      <Row>
        <Col>
          <Accordeon
            title1={frontmatter.accordeon.title1}
            title2={frontmatter.accordeon.title2}
            title3={frontmatter.accordeon.title3}
            title4={frontmatter.accordeon.title4}
            title5={frontmatter.accordeon.title5}
            title6={frontmatter.accordeon.title6}
            image1={frontmatter.accordeon.image1}
            image2={frontmatter.accordeon.image2}
            image3={frontmatter.accordeon.image3}
            image4={frontmatter.accordeon.image4}
            image5={frontmatter.accordeon.image5}
            image6={frontmatter.accordeon.image6}
          />
        </Col>
      </Row>
    </Container>
  );
};

export default IndexPage;

export const IndexPageQuery = graphql`
  query IndexPageQuery($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        templateKey
        title
        heading
        description
        bodycopy1
        bodycopy2
        banner1 {
          image1 {
            image
          }
        }
        accordeon {
          image1
          image2
          image3
          image4
          image5
          image6
          title1
          title2
          title3
          title4
          title5
          title6
        }
        grid1 {
          callout1
          callout2
          callout3
          image1_1 {
            image
          }
          image1_2 {
            image
          }
          image2_1 {
            image
          }
          image2_2 {
            image
          }
          image3_1 {
            image
          }
          image3_2 {
            image
          }
        }
      }
    }
  }
`;

Thank you for the support,
Thomas

@sidharthachatterjee
Copy link
Member

@sidharthachatterjee sidharthachatterjee commented Jan 16, 2019

Thank you for opening this @tbinte

Can you please link to a minimal reproduction for this?

@haxzie-xx
Copy link

@haxzie-xx haxzie-xx commented Jan 18, 2019

@tbinte This is a bug in React facebook/react#5479 and possible duplicate of #2750
Ran into this couple of days ago, possible work around is to avoid using dangerouslySetInnerHTML on p tags and use them within divs like this. #2750 (comment)

dangerouslySetInnerHTML={{ __html: `<div> ${data} </div>` }}

@tbinte
Copy link
Author

@tbinte tbinte commented Jan 21, 2019

I can confirm, using div's instead of p solved the problem.

@haxzie-xx
Copy link

@haxzie-xx haxzie-xx commented Jan 21, 2019

@tbinte thanks for letting us know that. I'll be closing this issue for now, if you need any further information regarding this please follow up on the issue I mentioned in the previous comment.

@haxzie-xx haxzie-xx closed this Jan 21, 2019
@jkjustjoshing
Copy link
Contributor

@jkjustjoshing jkjustjoshing commented Jan 30, 2019

Just as a further note, I encountered this issue a couple days ago. I have reproduced the issue at this repository.

Swapping out <p dangerouslySetInnerHTML> for <div dangerouslySetInnerHTML> did the trick for me!

@ecstasy2
Copy link

@ecstasy2 ecstasy2 commented Feb 4, 2019

I spent couple of hours today trying to fix this before stumbling on this issue. Could we keep this issue open until it is fixed. Gatsby prod-build should match develop behavior, so this is indeed a bug. Right?

@sidharthachatterjee
Copy link
Member

@sidharthachatterjee sidharthachatterjee commented Feb 4, 2019

@ecstasy2 Unfortunately there are currently some differences in behaviour between gatsby develop and gatsby build because we don't do SSR during development.

This is why such issues occur in build and not during develop. We are looking at converging the behaviour between the two in #10706

aleburato added a commit to aleburato/cogito-ergo-run that referenced this issue Feb 23, 2019
littlefinger42 added a commit to littlefinger42/lauras-portfolio that referenced this issue Apr 8, 2019
@devpascoe
Copy link

@devpascoe devpascoe commented Jul 2, 2019

A bit annoying but glad to have found folks struggling with the same issue. Switching from p to div worked.

dougestey added a commit to trailofdad/straylight-wiki that referenced this issue Jul 23, 2019
@juancamiloqhz
Copy link

@juancamiloqhz juancamiloqhz commented Sep 1, 2019

I did it with a div because of this thread, but actually is very anoying and somebody should explain a little bit more!

JamieMagee added a commit to JamieMagee/wedding that referenced this issue Sep 21, 2019
@caseymorrisus
Copy link

@caseymorrisus caseymorrisus commented Oct 30, 2019

Found this on google and felt the need to add more context in case anyone else does the same. The reason this works for div but fails with p is due to the HTML spec itself and how p tags are defined. The closing tag for p is optional and nesting p tags is not valid.

For example, if you were to write the following:

<p class="outer">
  <p class="inner"></p>
</p>

This would result in (on render):

<p class="outer"></p>
<p class="inner"></p>
<p></p>

The outer element immediately closes itself when encountering a child p element as nesting these tags is invalid. This leaves us with a dangling closing tag </p> which automatically adds an opening tag to itself. You'll notice these 3 tags are all siblings (none have a parent/child relationship as originally written).

smockle added a commit to smockle/smockle.com that referenced this issue Nov 15, 2019
ricca509 pushed a commit to ricca509/ricca509.github.io that referenced this issue Mar 5, 2020
simonvomeyser added a commit to simonvomeyser/simonvomeyser.de that referenced this issue Mar 12, 2020
jeffbliss added a commit to SouthFACT/southfact-gatsby-site that referenced this issue May 29, 2020
ibraheemdev added a commit to ibraheemdev/ibraheemdev that referenced this issue Jul 25, 2020
SarahFrench added a commit to HugoHermanWilson/hugohermanwilson.com that referenced this issue Aug 2, 2020
renatofreire added a commit to renatofreire/personal-blog-gatsby that referenced this issue Sep 13, 2020
- changed it because it causes the not rendering text at first load bug
-  see gatsbyjs/gatsby#11108 for more info
@Ben1980
Copy link

@Ben1980 Ben1980 commented Dec 22, 2020

I still habe the same problem. dangerouslySetInnerHTML is not working in production mode on my netlify project https://thoughts-on-coding.netlify.app. It should show a summary at each card but dose it only after entering the post contents and going back afterwards.
I also tried @haxzie-xx solution but still have the same problem.

I'm using gatsby 2.29.1, the repository can be found here https://github.com/Ben1980/thoughts-on-coding

@caseymorrisus
Copy link

@caseymorrisus caseymorrisus commented Dec 22, 2020

I still habe the same problem. dangerouslySetInnerHTML is not working in production mode on my netlify project https://thoughts-on-coding.netlify.app. It should show a summary at each card but dose it only after entering the post contents and going back afterwards.
I also tried @haxzie-xx solution but still have the same problem.

I'm using gatsby 2.29.1, the repository can be found here https://github.com/Ben1980/thoughts-on-coding

@Ben1980 You're using the Typography component from material-ui that renders to a p element which is an invalid use case of dangerouslySetInnerHTML. This isn't a bug with Gatsby or React necessarily, rather a poor choice of element to try and set content within. The HTML spec defines that the p tag cannot include block-level elements, including the p tag itself. See: Paragraph Spec

To fix:
From your codebase:

<Typography variant="body1" component="p" ... />

Try removing the component="p" prop, the Typography component should default to a span which allows setting inner HTML.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants