uiwjs / uiwjs/react-codemirror
Uncaught TypeError: Cannot read properties of null (reading 'extension')
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 161
- PR merge metrics
- No merged PRs in 30d
Description
I am adding code mirror with language support, I have added two languages:: json and javascript (jsx). But it crash the application and gives me this error::

Even if I am commenting the "extensions" prop error is still there.
Below I'm mentioning the code I have used::
// Code Editor component
import React, { useEffect, useState } from 'react'
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript'
import { json } from '@codemirror/lang-json'
export function CodeEditor({ data, lang, readOnly, callback }) {
// Initial state
const [language, setLanguage] = useState(lang)
// Life cycle method
useEffect(() => {
if (lang === "jsx") {
setLanguage(javascript({ jsx: true }))
} else {
setLanguage(json())
}
}, [lang])
// change handler
const onChange = React.useCallback((value, viewUpdate) => {
console.log('value:', viewUpdate);
}, []);
return (
<CodeMirror
className="outline-none"
readOnly={readOnly}
value={lang !== "jsx" ? JSON.stringify(data, null, 2) : data}
height="20rem"
theme={localStorage.getItem("theme")}
extensions={[language]}
onChange={onChange}
/>
)
}
CodeEditor.defaultProps = {
lang: "jsx",
readOnly: false
}
And used this inside parent component like this::
<CodeEditor data={console.log("my data")} />
I need to use 2 or more language, but here I am getting this error even if I am using single language.
Environment Details ::
"react": "^18.2.0",
"react-scripts": "^5.0.1",
"@uiw/codemirror-extensions-langs": "^4.15.1",
"@uiw/react-codemirror": "^4.15.1",
"@codemirror/lang-javascript": "^6.1.2",
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the provided CodeEditor component with @uiw/react-codemirror, @codemirror/lang-javascript, and @codemirror/lang-json, then inspect how the extensions prop handles the initial language state and its useEffect update. Done means the component renders without the null extension TypeError and supports both JSX and JSON modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100