uiwjs / uiwjs/react-codemirror

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

Open
#436 3 comments 0 reactions 0 assignees View on GitHub

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::
Screenshot 2022-12-20 at 11 43 06 AM

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.