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 · 7 comments

Comments

Projects
None yet
5 participants
@tbinte
Copy link

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

This comment has been minimized.

Copy link
Member

commented Jan 16, 2019

Thank you for opening this @tbinte

Can you please link to a minimal reproduction for this?

@haxzie

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Author

commented Jan 21, 2019

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

@haxzie

This comment has been minimized.

Copy link
Member

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 haxzie closed this Jan 21, 2019

@jkjustjoshing

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Member

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

robertsiipola added a commit to robertsiipola/kakskytkakskyt that referenced this issue Feb 23, 2019

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

wgao19 added a commit to wgao19/wgao19-cc that referenced this issue May 5, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.