TypeError: text is undefined

[Formalibus]

Didn't found any information on stackoverflow, might be I didn't good search I was on 2.1.2 version but with update this occured

[jaywcjlove]

@Formalibus Upgrade v2.1.8

[Formalibus]

@Formalibus Upgrade v2.1.8

I was actually at v2.1.8 then this error occured I am on v2.1.2 it's working

[jaywcjlove]

Can you provide an example? @Formalibus

[Formalibus]

here my imports

here I call it <div className="row markdownEditor"> <div className="col-sm"> <MDEditor preview="edit" height="730" onChange={setContent} /> </div> <div className="col-sm"> <MDEditor.Markdown source={content} /> </div> </div> now it working on v2.1.2

[Formalibus]

now I updated md editor and got this TypeError: text is undefined matchGrammar C:/Users/Udodelighed/react_lessons/destination_pamir/node_modules/prismjs/prism.js:887

884 | 885 | var str = currentNode.value; 886 |

887 | if (tokenList.length > text.length) { | ^ 888 | // Something went terribly wrong, ABORT, ABORT! 889 | return; 890 | }

tokenize C:/Users/Udodelighed/react_lessons/destination_pamir/node_modules/prismjs/prism.js:655

652 | var tokenList = new LinkedList(); 653 | addAfter(tokenList, tokenList.head, text); 654 |

655 | matchGrammar(text, tokenList, grammar, tokenList.head, 0); | ^ 656 | 657 | return toArray(tokenList); 658 | },

highlight C:/Users/Udodelighed/react_lessons/destination_pamir/node_modules/prismjs/prism.js:613

610 | language: language 611 | }; 612 | _.hooks.run('before-tokenize', env);

613 | env.tokens = .tokenize(env.code, env.grammar); | ^ 614 | .hooks.run('after-tokenize', env); 615 | return Token.stringify(_.util.encode(env.tokens), env.language); 616 | },

highlight C:/src/components/TextArea/index.tsx:36

33 | const [value, setValue] = useState(props.value); 34 | const highlight = () => { 35 | const pre = preElm.current;

36 | const html = Prism.highlight(value as string, Prism.languages.markdown, 'markdown'); | ^ 37 | pre!.innerHTML = ${html}<br />; 38 | }; 39 | useEffect(() => {

./node_modules/@uiw/react-md-editor/lib/esm/components/TextArea/index.js/__webpack_exports__.default</< C:/src/components/TextArea/index.tsx:51

48 | } 49 | }, [props.value]); 50 |

51 | useEffect(() => highlight(), [value]); | ^ 52 | useEffect(() => { 53 | if (props.autoFocus && textElm.current) { 54 | textElm.current.focus();

[jaywcjlove]

@Formalibus I cannot help you resolve the error.

Project example ? Put it in the repositories?

[Formalibus]

no need, thanks ))) just wanted to notify about issue if you want I can close an issue

[jaywcjlove]

:(

[ifbarrera]

Hi, I'm also getting this error on 2.1.8, react v. 16.14.0.

Usage:

import MDEditor from '@uiw/react-md-editor';

<MDEditor value={"sample value"} autoFocus={0} />

Error:

[jaywcjlove]

@ifbarrera https://codesandbox.io/s/markdown-editor-for-react-forked-2fzdr

[ifbarrera]

@jaywcjlove updated your code sandbox: https://codesandbox.io/s/markdown-editor-for-react-forked-19hfr?file=/index.js

Seems to be related to having MDEditor as part of a form, and setting its value with React.useEffect.

In my app, I use React.useEffect to pre-populate a previously saved value.

[jaywcjlove]

@ifbarrera

<Form.Item
  name="editor"
+   initialValue="test"
>
  <MDEditor value={"sample value"} autoFocus={0} />
</Form.Item>

[ifbarrera]

You can't dynamically change initialValue or defaultValue on forms based on state. https://ant.design/docs/react/faq#It-doesn't-work-when-I-change-defaultValue-dynamically

This is why I use the React.useEffect hook.

[jaywcjlove]

@ifbarrera https://ant.design/components/form/#components-form-demo-customized-form-controls

[an-lee]

Got the same issue when upgrade to 2.1.8 from 2.1.2. Also using with antd form component.

Solved by providing an initialValue.

[an-lee]

btw, for 2.1.8 version, the props autoFocus seems not working. It always auto focus even autoFocus={false} is set. @jaywcjlove