Issue with prism-react-renderer highlighting in production build in Gatsby
I am facing an issue with code highlighting when using prism-react-renderer component in Gatsby. I have configured it as per instructions in FormidableLabs/prism-react-renderer.
Everything works in development mode, but when I build a production version with the gatsby build command, the pre tag is not decorated with prism classes (class="prism-code language-python" is missing). My guess is that the production build does not include the right component or CSS, but I don't know where to start looking.
Also, this issue was not present when I used the same code 7-8 months back in another project. So it may be a problem introduced in the past few months because of a plugin/component update.
Attached are two screenshots - one with gatsby develop and another with gatsby build.
Commands I ran to setup and install the requisites:
> gatsby new test-mdx-prism-rendering https://github.com/gatsbyjs/gatsby-starter-hello-world
> npm install --save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
> npm install --save mdx-utils
> npm install --save prism-react-renderer
Sample GitHub project is at subhashb/test-mdx-prism-rendering
Found the answer as I tried to dig deeper.
The workaround is discussed here: https://github.com/ChristopherBiscardi/gatsby-mdx/issues/394
Apparently, the wrapRootElement defined in gatsby-browser.js should be made available in gatsby-ssr.js as well.
- How does React determine which state to apply when children are conditionally rendered?
- Set min/max on TextField type="number"?
- React Router Outlet Not Rendering in Nested Routes While Testing with React Testing Library After Upgrading to v7
- How can I add margin (space between each box) to all my rendered items in react virtualized grid?
- Prevent filtered list rerender when source array is modified
- Recharts issue with gaps between Bars
- how can i use application/ld+json in nextjs
- dynamically pass unknown number of parameters to react router
- Displaying an option's Name rather than ID in a MUI multi-select dropdown's renderValue
- CSS from tailwind.admin.config.js not overriding tailwind.config.js when using @config directive
- Custom HTML elements in intro.js
- Webpack: process.env undefined using DefinePlugin and DotEnv
- Resend email doesn't work in production environement with next js, but works in development
- React resetting and preserving state?
- Uncaught TypeError: sys is undefined when using Chakra UI with Vite
- Create A Folder and Switch to Folder while Using Multer
- Confusion about how to add submodule in Git
- How to render values onto screen?
- import Excel from "exceljs" throwing error on browser TypeError: Cannot read property 'prototype' of undefined
- React-Beautiful-DnD: Invariant failed: provided.innerRef has not been provided with a HTMLElement
- how can i get useState value inside useCallback (react hook)
- Material UI Autocomplete custom renderInput
- Unable to debug "Cannot use import outside a module" in azure web app (node:process)
- Why can't I resolve a promise via a ref stored resolve function in React?
- Nextjs: TypeError: unsupported file type: undefined after update to v.11
- How to trigger useEffects before render in React?
- Why usecallback is triggered but the dependencies are not updated?
- React-dropzone style drop area
- Material UI TextField type='search': How to replace/modify the 'clear' icon?
- Which is the best way to make API call in react web application should i use react fetch or is there available any other best tool