How to use typescript package (@portabletext/react) with Preact?

[karltaylor]

Hello,

I am trying to use @portabletext/react however whenever I build I get the following error: (Note: I was confused why this was in node_modules then realised the package isn't compiled (shipped as tsx)

✖ ERROR ./node_modules/@portabletext/react/src/components/defaults.tsx
ERROR in ./node_modules/@portabletext/react/src/components/defaults.tsx(14,40):
TS2304: Cannot find name 'h'.
error Command failed with exit code 1.

After doing some searching on the issues, I found preactjs/preact#3180 and updated my tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "lib": ["DOM"],
    "jsx": "react-jsx", // <-- Updated
    "jsxImportSource": "preact", // <-- Updated
    /* 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/**/*"]
}

Now when I run preact watch I get the following errors.

I've tried to ignore these errors using exclude but wondering if there's a simple way to ignore typescript issues from a typescript package that's not shipped as compiled code?

ERROR in /node_modules/@portabletext/react/src/react-portable-text.tsx(87,7):
TS2322: Type 'Element' is not assignable to type 'ReactNode'.
  Type 'VNode<any>' is not assignable to type 'ReactPortal'.
ERROR in /node_modules/@portabletext/react/src/react-portable-text.tsx(91,7):
TS2322: Type 'Element' is not assignable to type 'ReactNode'.
ERROR in /node_modules/@portabletext/react/src/react-portable-text.tsx(95,7):
TS2322: Type 'Element' is not assignable to type 'ReactNode'.
ERROR in /node_modules/@portabletext/react/src/react-portable-text.tsx(99,7):
TS2322: Type 'Element' is not assignable to type 'ReactNode'.
ERROR in /node_modules/@portabletext/react/src/react-portable-text.tsx(103,7):
TS2322: Type 'string | Element' is not assignable to type 'ReactNode'.
  Type 'Element' is not assignable to type 'ReactNode'.
ERROR in /node_modules/@portabletext/react/src/react-portable-text.tsx(106,5):
TS2322: Type 'Element' is not assignable to type 'ReactNode'.

[karltaylor]

Just thought I'd add that this happens on a fresh npx preact-cli create typescript my-app install too

[rschristian]

(Note: I was confused why this was in node_modules then realised the package isn't compiled (shipped as tsx)

Hm, that doesn't seem to be the case. The package certainly does distribute built files. Double check your imports, you shouldn't be importing from @portabletext/react/src/..., which can cause this. You won't need to (and shouldn't) make adjustments to your tsconfig.json to fix this.

skipLibCheck, straight from our docs, will silence TS errors in node_modules: https://preactjs.com/guide/v10/typescript#typescript-preactcompat-configuration