SyntaxHighlighter cannot be used as a JSX component

[martinmckenna]

Describe the bug

Cannot use Prism as a JSX component in my remix esm project

code:

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";

....tsx
return (
  <SyntaxHighlighter
    {...(props as any)}
    children={String(children).replace(/\n$/, "")}
    language={match[1]}
    PreTag="div"
    style={{ ...dark, overflowX: "scroll" }}
  />
);

/* package.json */

{
    "react-syntax-highlighter": "15.5.0",
    "@types/react-syntax-highlighter": "^15.5.7",
}

/* tsconfig.json */

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "target": "ES2019",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "app/*": ["./app/*"]
    },

    // Remix takes care of building everything in `remix build`.
    "noEmit": true,
  },
  "exclude": [
    "node_modules",
  ]
}

[martinmckenna]

possibly a react 18 compatibility issue?

[martinmckenna]

added this to my package.json to force react-syntax-highlighter to use react 18 and now it's working, but you guys should really upgrade:

  "resolutions": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7"
  },

[302570]

H

[302570]

Who caress

[64json]

added this to my package.json to force react-syntax-highlighter to use react 18 and now it's working, but you guys should really upgrade:

  "resolutions": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7"
  },

Somehow it didn't work for me, and my temporary workaround was:

import {Prism, SyntaxHighlighterProps} from 'react-syntax-highlighter';

const SyntaxHighlighter = Prism as typeof React.Component<SyntaxHighlighterProps>;

[m11o]

I had the same issues.
The bellow script was resolved.

import {Prism, SyntaxHighlighterProps} from 'react-syntax-highlighter';
const SyntaxHighlighter = (Prism as any) as React.FC<SyntaxHighlighterProps>;

...tsx
return (
  <SyntaxHighlighter
    {...(props as any)}
    children={String(children).replace(/\n$/, "")}
    language={match[1]}
    PreTag="div"
    style={{ ...dark, overflowX: "scroll" }}
  />
);

[studiosciences]

The issue is that your package manager is not resolving "@types/react": "*" to a consistent version.

I manually deleted the resolution from my yarn.lock and ran yarn install again. The issue went away.

Edit: If you use yarn: yarn dedupe

[Inplex-sys]

I have tried removing the lock file and I'm still having this issue

{
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "@types/react": "18.2.69",
    "@types/react-dom": "18.2.7"
}

[studiosciences]

@Inplex-sys It's possible another dependency it polluting the version resolution. You'd have to manually inspect the lock file to see what's going on. All @types/react dependencies should resolve to one version. Looks something like this...

"@types/react@npm:*, @types/react@npm:16 || 17 || 18, @types/react@npm:^18.2.67":
  version: 18.2.67
  resolution: "@types/react@npm:18.2.67"