Uncaught TypeError: Cannot read properties of null (reading 'extension')

[ArchanaSharma95]

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",

[ArchanaSharma95]

Having an issue even if not using "extensions" prop.. why?

[jaywcjlove]

Can you provide an example where the error can be reproduced using codesandbox.io? @ArchanaSharma95

[vadolasi]

Same error here...