No syntax highlighting after creating a production build with create-react-app

[talhabalaj]

Describe the bug
Styles are not applied to the <code> in the production build that's not the case when I'm using dev server.

To Reproduce
Steps to reproduce the behavior:

1. Use create-react-app to create project using typescript template (idk if template matters)
2. Use any of the syntax highlighter
3. Use npm start build
4. See the error

Expected behavior
Styles should be applied.

Screenshots
In dev:

In Production:

Desktop (please complete the following information):

• OS: Linux
• Browser Chrome
• Version 83

[alexandrecanuto]

Same thing happens to me, it runs fine in dev / localhost, but as soon as I deploy it, it becomes one single block of text with the same syntax.

[filipe-costa]

Same issue happens while using Nextjs.

[FedericoDiRosa]

And Gatsby

[FedericoDiRosa]

Correction: in Gatsby the colours disappear only after React hydration kicks in

[michaelyuen]

I'm not sure what the case was in June, but I was not able to reproduce the issue. The package works as expected.

Reproduction with create-react-app + typescript: https://github.com/goomba/react-syntax-highlighter-issue-reproduction
Deployed: https://react-syntax-highlighter-repro-cra.vercel.app/

I also have a Nextjs app with it working. Can't say for Gatsby.

[filipe-costa]

@michaelyuen hello, thanks for reproducing it for Nextjs.

Unfortunately, the issue still persists and I think the culprit might be the same as @FedericoDiRosa mentioned about Gatsbyjs.

Whenever I refresh my blog page, I can quickly see the syntax highlighting disappear and change to new styles, so I think it is due to hydration.

[michaelyuen]

I've created a reproduction using Gatsby as well.

Summarizing

• Create React App: https://react-syntax-highlighter-repro-cra.vercel.app/ ✅
• Gatsby: https://react-syntax-highlighter-repro-gatsby.vercel.app/ ✅
• Next.js: https://mikey.baby/notes/1-hello-world ✅

Repo
https://github.com/goomba/react-syntax-highlighter-issue-reproduction

---

If you are able to share the code that is presenting the issue I'd be happy to take a look. I'm sure it's a more complex use case than simply bootstrapping a project.

[simmerer]

@michaelyuen Hugely appreciate you digging into this! It'd be great to get to the root of this issue and document how it arises.

[FedericoDiRosa]

@michaelyuen Thanks a lot for that, but I can still reproduce the issue https://vigilant-visvesvaraya-f810c1.netlify.app/

FYI I am importing the Prism Light Build

[michaelyuen]

@simmerer You're welcome! This is a great library and I'm happy to help support it. I'm unsure of the guidelines around contributing, but if you're aware of needs I may be open to taking on some responsibility.

@FedericoDiRosa Cool! When I have some time I'll test out some Prism usage - my reproductions are using hljs. Would it be possible to also share the source to your reproduction?

[FedericoDiRosa]

@michaelyuen sure, I forked your repo here https://github.com/FedericoDiRosa/react-syntax-highlighter-issue-reproduction

And it's actually looking better than my previous example but still having that flickering effect on load, see here https://elastic-neumann-a98d3c.netlify.app/

[filipe-costa]

More information from my side, this is my code:

import styled from 'styled-components'
import SyntaxHighlighter from 'react-syntax-highlighter'
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript'

SyntaxHighlighter.registerLanguage('javascript', js);

import { HackFont } from '../Typography/common'

const PreTag = styled.pre`
  ${HackFont}
  font-size: ${({ theme }) => `${theme.markdown.code.text};`}
`

const CodeTag = styled.code`
  ${HackFont}
  > span {
    ${HackFont}
  }
`

interface Props {
  children?: null
  language?: string
  value: string
}

const CodeBlock: FC<Props> = ({ language, value }) => {
  return (
    <SyntaxHighlighter
      showLineNumbers
      startingLineNumber={1}
      language={language || 'javascript'}
      styles={docco}
      PreTag={PreTag}
      CodeTag={CodeTag}
    >
      {value}
    </SyntaxHighlighter>
  )
}

export default CodeBlock

I am also using this library together with React-Markdown and passing this custom code block component to their renderer as well.

[simmerer]

@michaelyuen so far the policy is "if you see a need and have time to contribute, PRs are celebrated and incorporated" :)

Compatibility across bundlers (and SSR/hydration) is definitely an area where we could use some help. I'm already grateful for you investigating this and building those test cases.