TypeScript type definitions not recognized in build process (@contember/react-client)

[thejakubkriz]

Hello,
Firstly, I want to express my gratitude for all the hard work you've put into Contember. I'm new to all this, so please bear with me if my assumptions are incorrect, or if the issue turns out to be on my end. I've encountered an issue related to TypeScript type definitions while attempting to build my Next.js project, which I use to render specific data from my Contember project. I use the RichTextRenderer and don't have any custom references or elements implemented. Below are the details of the problem.

The build process throws an error indicating it cannot find the type declarations for the @contember/react-client module:

Type error: Could not find a declaration file for module '@contember/react-client'. '/path_to_project/node_modules/@contember/react-client/dist/production/index.js' implicitly has an 'any' type.
  There are types at '/path_to_project/node_modules/@contember/react-client/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@contember/react-client' library may need to update its package.json or typings.

> 11 | import { RichTextRenderer } from '@contember/react-client'

For now I have bypassed type checking for the @contember/react-client module with declare module '@contember/react-client';

"typescript": "5.1.6"
"next": "13.4.19" (using the new Next.js app directory)
@contember/react-client": "^1.2.0-rc.18"

Thanks for helping me resolve this issue.

[matej21]

Hi, thanks for reporting this issue.
It looks that typings fallback in package.json is no longer supported. I've created a PR which should solve this: #619

I will let you know when it is released, so you can test it.

[matej21]

@thejakubkriz we've release interface 1.2.0 (stable) with the types export, could you please try, if it works?

[thejakubkriz]

@matej21 I get this error when I try to build

Type error: Type 'ContentPart' is not assignable to type 'RichTextBlock'.
  Index signature for type 'string' is missing in type 'ContentPart'.

> 148 |                                 <RichTextRenderer key={part.id} blocks={[part]} sourceField="json" />

If I extend my ContentPart type from the RichTextBlock type, it functions correctly. See below the implementation that I have used.

import { RichTextBlock } from '@/node_modules/@contember/react-client/dist/types/components/RichTextRenderer/RichTextBlock'

export interface ContentPart extends RichTextBlock, BaseEntity {
    order: number;
    content: Content;
    json: string;
}

[matej21]

the RichTextBlock type should be imported from the @contember/react-client, but I think, you don't have to extend this type at all.

[thejakubkriz]

Hi, You are correct; I have made the necessary changes and now import it from @contember/react-client. However, when I refrain from extending it, I encounter the error I previously mentioned in my message.
I also have an additional question regarding the RichTextRenderer topic. I am fetching and rendering the data on the server in NextJS 13. When I use { RichTextRenderer } from '@contember/react-client', I encounter an error indicating that I am importing a component that requires useState, making it functional only within a Client Component. Is it possible to utilize the RichTextRenderer as a server component as well or do I need to build my own renderer?

The error was caused by importing '@contember/react-client/dist/development/index.js' in './app/competitions/[slug]/page.tsx'.

[jonasnobile]

Hi @thejakubkriz,

However, when I refrain from extending it, I encounter the error I previously mentioned in my message.

Try to use type instead of interface, there are some differences in the index signature handling.

I am fetching and rendering the data on the server in NextJS 13. When I use { RichTextRenderer } from '@contember/react-client', I encounter an error indicating that I am importing a component that requires useState, making it functional only within a Client Component. Is it possible to utilize the RichTextRenderer as a server component as well or do I need to build my own renderer?

when you are using components with hooks such as useState or useEffect, you need to specify that the component is client side. You can find out more in NextJS documentation.

If you want to use our RichTextRenderer component you have to use it as client side component.

Solution

Create new component called RichTextRenderer.tsx in components directory.

'use client'

import { RichTextRenderer as ContemberRichTextRenderer, RichTextRendererProps } from '@contember/react-client'

export default function RichTextRenderer(props: RichTextRendererProps) {

	return (
		<ContemberRichTextRenderer {...props} />
	)
}

Then, you can use this component instead of directly imported RichTextRenderer from our package.