Usage with Preact getting error: Type 'Element' is not assignable to type 'ReactNode'.

[karltaylor]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @portabletext/react@1.0.6 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@portabletext/react/src/react-portable-text.tsx b/node_modules/@portabletext/react/src/react-portable-text.tsx
index 0b68a71..fb38751 100644
--- a/node_modules/@portabletext/react/src/react-portable-text.tsx
+++ b/node_modules/@portabletext/react/src/react-portable-text.tsx
@@ -79,7 +79,7 @@ const getNodeRenderer = (
   components: PortableTextReactComponents,
   handleMissingComponent: MissingComponentHandler
 ): NodeRenderer => {
-  function renderNode<N extends TypedObject>(options: Serializable<N>): ReactNode {
+  function renderNode<N extends TypedObject>(options: Serializable<N>): JSX.Element | string {
     const {node, index, isInline} = options
     const key = node._key || `node-${index}`
 

This issue body was partially generated by patch-package.

• Using Preact
• Using Portable Text
• This error happened

✖ ERROR ./node_modules/@portabletext/react/src/react-portable-text.tsx
ERROR in ./node_modules/@portabletext/react/src/react-portable-text.tsx(87,7):
TS2322: Type 'Element' is not assignable to type 'ReactNode'.
error Command failed with exit code 1.

Managed to get builds working by changing it to JSX.Element | string

Here's my TS config

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "lib": ["DOM", "ES2022"],
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    /* allowJs
     *
     * Allows us to use Javascript and Typescript files
     * together. This is because we built the new calculators using Typescript.
     */
    "allowJs": true,
    "noEmit": true /* Do not emit outputs. */,
    "skipLibCheck": true,
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          /* Regex that will match anything like `*.css` when used in a ts file. */
          "customMatcher": ".+\\.css"
        }
      }
    ]
  },
  "include": ["src/**/*"]
}

cc @SamScott3000

[snorrees]

It seems to me like you are importing from the src directory in the lib. You should instead import from the library exports.
Ie, @portabletext/react instead of @portabletext/react/src/*. This way you do not have to recompile the library code, and this error should go away.