inlineCode error was occurred when I run the script for KaTeX preview

[champon1020]

What

I ran the script for KaTeX preview written in README and got inlineCode error when I inserted two back quotes into editor.

code (written in README): https://codesandbox.io/s/markdown-editor-katex-for-react-7v3vl

Inserted two back quotes like this:

Found two errors:

react-dom.development.js:14348 Uncaught Error: inlineCode(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

The above error occurred in the <inlineCode> component:
    at inlineCode (https://7v3vl.csb.app/index.js:29:25)
    at p
    at Root (https://7v3vl.csb.app/node_modules/react-markdown/lib/renderers.js:45:28)
    at ReactMarkdown (https://7v3vl.csb.app/node_modules/react-markdown/lib/react-markdown.js:40:19)
    at div
    at MarkdownPreview (https://7v3vl.csb.app/node_modules/@uiw/react-md-editor/lib/esm/components/Markdown/index.js:47:33)
    at div
    at div
    at MDEditor (https://7v3vl.csb.app/node_modules/@uiw/react-md-editor/lib/esm/MDEditor.js:42:33)
    at App

Solution

I inserted the null check statement for children and got no errors.

const renderers = {
  inlineCode: ({ children }) => {
    if (/^\$\$(.*)\$\$/.test(children)) {
      const html = katex.renderToString(children.replace(/^\$\$(.*)\$\$/, '$1'), {
        throwOnError: false,
      });
      return <code dangerouslySetInnerHTML={{ __html: html }} />
    }
    if (children == null) {
        return <code />;
    }
    return children;
  },
  code: ({ children, language, value }) => {
    if (language.toLocaleLowerCase() === 'katex') {
      const html = katex.renderToString(value, {
        throwOnError: false
      });
      return (
        <pre>
          <code dangerouslySetInnerHTML={{ __html: html }} />
        </pre>
      );
    }
    if (children == null) {
        return <code />;
    }
    return children;
  }
}

I think it needs to update README and I wanna other solutions if you have. Thanks:)

[jaywcjlove]

const renderers = {
  inlineCode: ({ children }) => {
    if (/^\$\$(.*)\$\$/.test(children)) {
      const html = katex.renderToString(children.replace(/^\$\$(.*)\$\$/, '$1'), {
        throwOnError: false,
      });
      return <code dangerouslySetInnerHTML={{ __html: html }} />
    }
-    if (children == null) {
-        return <code />;
-    }
    return children;
  },
  code: ({ children, language, value }) => {
    if (language.toLocaleLowerCase() === 'katex') {
      const html = katex.renderToString(value, {
        throwOnError: false
      });
      return (
        <pre>
          <code dangerouslySetInnerHTML={{ __html: html }} />
        </pre>
      );
    }
-    if (children == null) {
-        return <code />;
-    }
    return children;
  }
}

@champon1020 The code is redundant.

Solution

<MDEditor
- value={mdKaTeX}
+ value={mdKaTeX === null ? '' : mdKaTeX}
/>

or

<MDEditor
- value={mdKaTeX}
+ value={mdKaTeX  || ''}
/>

thx!

[champon1020]

Thanks for your reply! I think this issue was solved so I'll close.