I am using react-codemirror version ^4.20.2 in my Nextjs project. Everything is fine in development environment. But when I deployed my Nextjs app on Vercel, the Codemirror component breaks it's appearance and styling on Component re-render or some state change that is associated with the code inside that Codemirror component. Please help if anyone has any solution. Attaching a screenshot of the problem:
This is a part of my code where I am using this component:
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
export default function Editor({ setLoader, activeCode, setActiveCode }) {
const [code, setCode] = useState("");
<CodeMirror
value={code}
lang="js"
extensions={[javascript({jsx: true})]}
onChange={(val)=>{setCode(val)}}
theme={tokyoNight}
highlightSelectionMatches={true}
style={{
width: "90%",
height: "300px",
position: "relative",
marginBottom: "5%",
fontSize: "5px",
}}
/>
}
I tried using useRef for storing the value of Code to prevent re-render of the component, but I need to use useState only, as there are other things too where the changes need to be reflected. Please Help. Thanks in advance.
I've started a thread on CodeMirror's discussion forum to see if there's a more direct solution that could be used to prevent Next.js from removing the
<style>element used for all of CodeMirror's theming, but until then:You can fix this by using Custom Elements and the ShadowDOM. Hold on, don't run off! It wasn't too bad to set up.
The ShadowDOM encapsulates the CodeMirror styles in its own document, which won't be removed by Next.js as it's completely separate from the root document's
<head>. CodeMirror works great inside the ShadowDOM, simply you provide theshadowRootas therootproperty ofEditorViewConfig.We have our own custom wrapper of CodeMirror for React that didn't take much manipulation to get slotted into a Custom Element's Shadow DOM. Here's a simplified version of CodeMirror in a Custom Element Shadow DOM rendered with React: https://codepen.io/shshaw/pen/qBvyyLe?editors=0010
React CodeMirror seems to have a
rootprop that you can use to help with mounting to the Shadow DOM, but I'm not immediately sure how you'd wrap it in a way that would render it in a custom element's Shadow DOM.Here are a few helpful resources on Shadow DOM usage: