TS2322 error on <PrismicRichText> field parameter

Developing with Prismic
1

Hi guys,

I just started using Prismic with React/Typescript. It might not be related to Prismic at all, but I get a TS2322 error on my <PrismicRichText> field attribute when passing the document field I want to display.

For instance:

Screen Shot 2022-02-02 at 20.05.33
Screen Shot 2022-02-02 at 20.05.332318×494 94.7 KB

I managed to workaround using a // @ts-ignore comment:

Screen Shot 2022-02-02 at 20.05.43
Screen Shot 2022-02-02 at 20.05.43880×166 13.3 KB

But it does not look really good obviously :roll_eyes:

Is there a way I can get around this issue?

Thanks

2

Hey Thibault,

I'm not sure what the issue is here, so I'm going to reach out to the team to get more info.

Thanks.

4

Thanks @Phil !

FYI :

  • Node version :arrow_right: v16.11.1
  • package.json :arrow_right: 
{
  "name": "hello-prismic",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@prismicio/client": "^6.1.1",
    "@prismicio/react": "^2.0.5",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "@types/react-helmet": "^6.1.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
  • ts-config.json :arrow_right: 
{
  "compilerOptions": {
    "target": "es2017",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
5

Hey @thibault.pensec,

So this is related to the fact you haven't typed your API response, therefore you're dealing with a field which could be any kind field ( AnyRegularField )Two solutions:

  • Typing your API response using @prismicio/types through the generics on client method calls ( client.getSingle<PrismicDocument<{ description: RichTextField }>>("home") )
  • Using a type assertion ( <PrismicRichText field="{home.data.description as RichTextField}" /> )

We’d recommend typing the full document (the first solution). Today, that needs to be written by hand which isn’t documented. We only have an example here: https://github.com/prismicio/prismic-client/tree/master/examples/with-typescript

The second solution is the quicker of the two if you want an immediate, low-effort fix. Choosing this route negates the benefits of TypeScript, so we would discourage it, but it’s still a valid choice.

Thanks.

1 Like
6

Thanks @Phil it perfectly works!

1 Like