Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with <Highlight /> component in React/Remic #243

Open
2 tasks done
alissanguyen opened this issue Apr 26, 2024 · 2 comments
Open
2 tasks done

Issue with <Highlight /> component in React/Remic #243

alissanguyen opened this issue Apr 26, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@alissanguyen
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Code of Conduct

  • 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
@alissanguyen alissanguyen added the bug Something isn't working label Apr 26, 2024
@carbonrobot
Copy link
Contributor

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

@alissanguyen
Copy link
Author

@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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants