Issue with <Highlight /> component in React/Remic

[alissanguyen]

Is there an existing issue for this?

• [X] I have searched the existing issues

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Code Sandbox link

No response

Bug report

I'm getting this error:

Highlight' cannot be used as a JSX component.
  Its instance type 'Highlight' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/nouveau/Documents/workspaces/alissanguyen-dot-dev/node_modules/@remix-run/server-runtime/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

I'm using react v18.3.0 and PRR v1.3.1

[carbonrobot]

Thanks for the bug report @alissanguyen. Do you have a small reproduceable example or some example code?

[alissanguyen]

@carbonrobot Yes, I have simplify the code a bit but here is how i'm using it.

import * as React from "react";
import Highlight, { defaultProps, Language } from "prism-react-renderer";
import editorLightTheme from "prism-react-renderer/themes/github";
import editorDarkTheme from "prism-react-renderer/themes/vsDark";
import { ContentfulCodeBlock } from "~/contentful/types";

interface Props {
  data: ContentfulCodeBlock;
}

const CodeBlock: React.FC<Props> = (props) => {
  const codeText = props.data.codeText;

  const language: Language = props.data.language as Language ;
  return (

    <div className="CodeBlock__Wrapper">
      <Highlight
        {...defaultProps}
        theme={
          theme === SupportedTheme.LIGHT ? editorLightTheme : editorDarkTheme
        }
        code={codeText}
        language={language}
      >
        {({ className, tokens, getLineProps, getTokenProps }) => {
          return (

            <div className="CodeBlock">

              <pre
                className={`${className} CodeBlock__InnerContainer overflow-x-auto roundedLg p-4 ${props.data.fileName ? "pt-2" : ""
                  }
                `}
              >
                {tokens.map((line, i) => {
                  const { classname, ...restProps } = getLineProps({
                    line,
                    key: i
                  });
                  return (
                    <>
                      <div
                        key={i}
                        {...restProps}
                        className={`${className} LineNo__${i + 1
                          } grid CodeBlock__LineWrapper relative ${props.data.shouldDisplayLineNumber ? "gap-10" : ""
                          } breakWord whitespace-preWrap`}
                      >
                        <div>

                        {more JSX elements here}

                        </div>
                      </div>
                    </>
                  );
                })}
              </pre>
            </div>

          );
        }}
      </Highlight>
    </div>
  );
};

export default CodeBlock;

[aleciavogel]

Update your import

import { Highlight, Language } from "prism-react-renderer";

and remove any mention of defaultProps

<Highlight
  theme={
    theme === SupportedTheme.LIGHT ? editorLightTheme : editorDarkTheme
  }
  code={codeText}
  language={language}
>