No Syntax highlighting when built

[Adam-Collier]

Describe the bug
Currently when I am working in my dev environment and the syntax highlighting is working as expected, however when I build the app there is no syntax highlighting and it just renders the string that was passed in (using CRA btw)

To Reproduce
The repo can be found here:
https://github.com/Adam-Collier/rownan-react/tree/build_app

you can try it in dev npm run dev

and build npm run build && npm run electron

Expected behavior
I expected the syntax highlighting to be identical to that in development

Screenshots

import React from 'react'
import { useAppState } from '../state-context'
import styled from 'styled-components'

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs'
import html from 'react-syntax-highlighter/dist/esm/languages/hljs/htmlbars'

const CodeEditor = styled.div`
  overflow: scroll;
  background-color: rgb(245, 242, 240);
  height: 100vh;
  code {
    font-family: 'Fira Mono';
    font-size: 14px;
  }
  pre {
    padding: 35px 25px 25px 25px;
    margin-top: 0;
  }
`

const CodePreview = () => {
  const { outputHTML } = useAppState()

  SyntaxHighlighter.registerLanguage('html', html)

  return (
    <CodeEditor className="CodeMirror">
      <SyntaxHighlighter
        language="html"
        style={githubGist}
      >
        {outputHTML}
      </SyntaxHighlighter>
    </CodeEditor>
  )
}

export default CodePreview

Before it is built:

After it is built:

what is in the inspector:

Desktop (please complete the following information):

• OS: Mac
• Electron App

I have no idea why it would do this, hope this can be solved

[Adam-Collier]

So to build on this I have tried switching it from hljs to prism and that highlights it fine

[conorhastings]

since it works in the dev environment i am guessing it is webpack config there, please ask on stackoverflow or in the CRA issues

[eszterkv]

for anyone else running into this, leaving out SyntaxHighlighter.registerLanguage(...) can also cause syntax highlighting not to happen (:

[Adam13531]

Oh boy, I just spent a couple of hours debugging what was essentially this exact same problem. 😳 I made progress and I think I have answers for anyone who stumbles on this in the future.

I'm using NextJS with static exports and react-syntax-highlighter, and I was trying to highlight HTML with nested JavaScript in a <script> tag (that's the only real difference from @Adam-Collier's original problem, which was HTML with a nested style tag instead of a script tag).

Here are my findings:

• The underlying problem is due to how highlightjs (a dependency of react-syntax-highlighter) works—the concept of "sub-languages". This is when one language (like HTML) includes another (like JavaScript or CSS). In a development build, tree-shaking is usually turned off, so calling registerLanguage('html', htmlbars) is likely enough to include its sub-languages (xml, css, javascript, and potentially others). However, in production, tree-shaking results in them being discarded.
• The solution is to explicitly register each sub-language. However, htmlbars is intended specifically for Handlebars, not HTML, so I omitted that and instead manifested the two languages I was using: HTML and JavaScript. This is obfuscated slightly because HTML doesn't actually exist as a standalone language in highlightjs; it's an alias of XML. Thus, the final imports and registerLanguage calls look like this:

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
SyntaxHighlighter.registerLanguage('xml', xml);
SyntaxHighlighter.registerLanguage('javascript', javascript);

• If you need htmlbars, then you would import and register it in addition to the two languages above. Likewise with css.
• I didn't look into Prism, but I assume that it works because its underlying language files are done through refractor, which must operate differently. For anyone curious, here's a working link to @Adam-Collier's updated code where you can see it in action.

There was one unexplained portion for me, which is that for what looked like a single animation frame, my code did seem to render with proper syntax highlighting even in production (although it used the wrong theme). Afterward, it would revert to what's shown in the original post's images (where there's a <code> DOM element with a raw string for its contents). I didn't investigate this further since my original problem was just trying to add a code snippet to my blog, and I'm satisfied with the primary explanations.

[backus]

Perfect explanation @Adam13531, thanks for sharing how you solved the problem