TypeError: Cannot read properties of null (reading 'set')

[zjy365]

Here's how I use it

            <CodeMirror
              extensions={[StreamLanguage.define(yaml)]}
              width="100%"
              height="100%"
              minHeight="1200px"
              onChange={debounce(onYamlChange, 1000)}
            />

my version

    "@codemirror/language": "^6.8.0",
    "@codemirror/legacy-modes": "^6.3.3",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@kubernetes/client-node": "^0.18.1",
    "@next/font": "13.1.6",
    "@tanstack/react-query": "^4.24.10",
    "@uiw/react-codemirror": "^4.21.9",

When I mouseover this editor section, the console output is consistent. this error

[jaywcjlove]

@zjy365 Can you provide me with a reproducible example using https://codesandbox.io? I can help you troubleshoot the issue.

[zjy365]

@jaywcjlove I created a new next project and tried it. You can take a look. https://codesandbox.io/p/sandbox/xenodochial-robinson-9yfw8c

[jaywcjlove]

There are no errors when downloading the project locally.

@zjy365 So, I cannot reproduce your error.

[noa24]

i also have the same issue

[zjy365]

The mouse needs to move within this area to trigger the 'mousemove' event, or if there is any input in the editor, it will trigger the 'error' event mentioned above.

@jaywcjlove

[chenbinli-dev]

i have the same issuse☹️

[jaywcjlove]

https://github.com/uiwjs/react-codemirror/assets/1680273/c1b29a5a-1a1d-4b90-b2d2-61202adccf9b

https://github.com/uiwjs/react-codemirror/tree/master/example/nextjs

I recreated the nextjs project and the error disappeared.

@codercoin98 @zjy365 @noa24

[se1phine]

[zlytxx]

i have the same issuse too, only set the onChange props will show

[zlytxx]

https://uiwjs.github.io/react-codemirror/#/theme/data/copilot the demo has same error

[kohloth]

I am having this same issue too. It seemed to start happening recently (I think) but downgrading the version number does not seem to have fixed the problem. These errors come up when moving the mouse over the code mirror input and when pressing keys inside of it. I've tried to see if I can make the error go away by simplifying my use of the component, but even after stripping it down to the bare minimum props (shown below) I still see these console errors.

My usage of the component (note that I've commented most props out - errors still occur)

    <CodeMirror
        ref={rootRef}
        // indentWithTab={false}
        // readOnly={usedReadOnly}
        className="code-input__input"
        // theme={theme}
        value={value}
        height="100%"
        // extensions={extensions}
        onChange={handleChange}
        // basicSetup={basicSetup}
    />

Error is the same as the others have reported:

[jaywcjlove]

@zjy365 @kohloth @liaoyingtao This is caused by the integrated crosshairCursor Extension. I have already set it to false by default.

Upgrading to v4.21.15 or using the following configuration can suppress the error caused by the crosshairCursor. The issue related to crosshairCursor needs to be resolved by the @codemirror team.

<CodeMirror 
  basicSetup={{
+   crosshairCursor: false
  }}
 />

[mojiAh]

Had same issue, for now setting the crosshairCursor: false fixed the issue.

[zjy365]

@zjy365 @kohloth @liaoyingtao This is caused by the integrated crosshairCursor Extension. I have already set it to false by default.

Upgrading to v4.21.15 or using the following configuration can suppress the error caused by the crosshairCursor. The issue related to crosshairCursor needs to be resolved by the @codemirror team.

<CodeMirror 
  basicSetup={{
+   crosshairCursor: false
  }}
 />

Thank you. Successfully resolved