Strong inside paragraph renders paragraph without styles (only in build and on first load)

[stevemarksd]

Just upgraded all deps to latest today. [email protected]

Description

Strong inside paragraph renders paragraph without styles.

Steps to reproduce

Requirements to reproduce:

• Custom html before paragraph
• Strong inside paragraph
• On first load only on build mode the paragraph has no classname

<p>hy</p>
hello **hello** hello

Notes:

• If I navigate to another page and then come back, paragraph has classname
• On dev has classname
• If you put this said paragraph above, all fine (see below)

hello **hello** hello
<p>hy</p>

Plugins:

• gatsby-transformer-sharp
• gatsby-plugin-sharp
• gatsby-plugin-sitemap
• gatsby-plugin-catch-links
• gatsby-plugin-emotion
• gatsby-plugin-typescript
• gatsby-plugin-react-helmet
• gatsby-plugin-manifest
• gatsby-source-filesystem
• gatsby-transformer-remark: gatsby-remark-component, gatsby-remark-images

Expected result

What should happen?

Actual result

What happened.

Environment

System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
Binaries:
Node: 12.9.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
npmPackages:
gatsby: ^2.0.67 => 2.21.9
gatsby-image: ^2.0.25 => 2.4.0
gatsby-plugin-catch-links: ^2.0.9 => 2.3.0
gatsby-plugin-emotion: ^3.0.1 => 3.0.1
gatsby-plugin-google-analytics: ^2.0.8 => 2.3.0
gatsby-plugin-manifest: ^2.0.12 => 2.4.1
gatsby-plugin-offline: ^2.0.19 => 2.2.10
gatsby-plugin-react-helmet: ^3.0.0 => 3.3.0
gatsby-plugin-sharp: ^2.0.15 => 2.6.0
gatsby-plugin-sitemap: ^2.0.3 => 2.4.1
gatsby-plugin-typescript: ^2.0.3 => 2.4.0
gatsby-plugin-typography: ^2.2.2 => 2.5.0
gatsby-remark-component: ^1.1.3 => 1.1.3
gatsby-remark-images: ^3.0.1 => 3.3.0
gatsby-source-filesystem: ^2.0.12 => 2.3.0
gatsby-transformer-remark: ^2.1.15 => 2.8.4
gatsby-transformer-sharp: ^2.1.9 => 2.5.0
npmGlobalPackages:
gatsby-cli: 2.12.7

Maybe related:

• Inconsistent CSS Styling Differs Between gatsby develop and build - Why? #9911

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[stevemarksd]

I'm not really able to recreate right now.

But here are some notes:

• On first load actually renders correctly
• The first time it renders it renders incorrectly for some reason

I'm using rehype-react to render the custom component with this code:

export const MarkdownRenderer: React.FC<Props> = props => {
  const renderAst = React.useMemo(() => {
    const rehypeReact = new RehypeReact(props.createPageMarkdownComponents())
    return rehypeReact.Compiler
  }, [props.createPageMarkdownComponents])
  return renderAst(addAnchorsToHeadings(props.htmlAst))
}

and one of the components is here:

        p: props => {
          console.log(props)
          return (
            <types.Paragraph {...props} className={'test'} data-test={'ssss'}>
              <>{props.children}</>
            </types.Paragraph>
          )
        },

so it goes on this child properly and everything. I start to worry that emotion.js is buggy.

For some reason react dom is replacing that element with a new one without the className and also removes all the attributes.

[stevemarksd]

import * as React from 'react'
import * as ReactDomServer from 'react-dom/server'
import * as ReactDom from 'react-dom'
import * as RehypeReact from 'rehype-react'
import * as unified from 'unified'

const Youtube = props => {
  return <p data-test="Youtube">test</p>
}

const P = props => {
  return <p data-test="ppp">{props.children}</p>
}

const options = {
  createElement: React.createElement,
  components: {
    youtube: Youtube,
    p: P,
  },
}

var processor = unified().use(RehypeReact, options)

export const MarkdownRenderer: React.FC<{}> = props => {
  const ast = {
    type: 'root',
    children: [
      {
        type: 'element',
        tagName: 'p',
        properties: {},
        children: [
          {
            type: 'element',
            tagName: 'youtube',
            children: [],
          },
        ],
      },
      {
        type: 'text',
        value: '\n',
      },
      {
        type: 'element',
        tagName: 'p',
        properties: {},
        children: [
          {
            type: 'text',
            value: 'xxxx',
          },
        ],
      },
      {
        type: 'element',
        tagName: 'p',
        properties: {},
        children: [
          {
            type: 'text',
            value: 'yyy',
          },
        ],
      },
    ],
    data: {
      quirksMode: false,
    },
  }

  const output = processor.stringify(ast)
  console.log(`>>>`, ReactDomServer.renderToString(output))
  // Outputs:
  // <div data-reactroot="">
  //   <p data-test="ppp"><p data-test="Youtube">test</p></p>
  //   <p data-test="ppp">xxxx</p>
  //   <p data-test="ppp">yyy</p>
  // </div>

  // But the dom in the browser is
  // <div>
  //   <p data-test="ppp"><p data-test="Youtube">test</p></p>
  //   <p data-test="Youtube">xxxx</p>
  //   <p>yyy</p>
  // </div>
  return output
}

setTimeout(() => {
  // here renders correctly
  // <div>
  //   <p data-test="ppp"><p data-test="Youtube">test</p></p>
  //   <p data-test="ppp">xxxx</p>
  //   <p data-test="ppp">yyy</p>
  // </div>
  ReactDom.render(<MarkdownRenderer />, document.body)
}, 5000)

Reproduction here

[wardpeet]

@stevemarksd Could you create a reproduction inside gatsby? As in a small git repo?

[stevemarksd]

I can't reproduce, but I'm pretty sure is because I had some @material-ui/styles included twice. (I have a common repo and the website repo, both had that node_module) I fixed by putting a resolver in webpack.

[SnakeSmoke]

I had the same problem and my fix was to import https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/ into my gatsby-config.js