uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.63k stars 130 forks source link

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

Open ArchanaSharma95 opened 1 year ago

ArchanaSharma95 commented 1 year ago

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",
ArchanaSharma95 commented 1 year ago

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

jaywcjlove commented 1 year ago

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

vadolasi commented 1 year ago

Same error here...