TypeScript errors with ClayUI v3.143 on React 18.2

[noahbowman]

In a standalone React/TypeScript project, all v3.143 @clayui/* dependencies fail with the same TS error on React 18.2 as this one for @clayui/layout:

Could not find a declaration file for module '@clayui/layout'. '../node_modules/@clayui/layout/lib/esm/index.js' implicitly has an 'any' type.
  There are types at '../node_modules/@clayui/layout/lib/index.d.ts', but this result could not be resolved when respecting package.json "exports". The '@clayui/layout' library may need to update its package.json or typings.ts(7016)

I can workaround this error on all @clayui/* libraries by adding my own path resolution in tsconfig.json to fix the missing type exports

// tsconfig.json
{
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      // workaround for @clayui not exporting types
      "@clayui/alert": ["node_modules/@clayui/alert/lib"],
      "@clayui/button": ["node_modules/@clayui/button/lib"],
      "@clayui/core": ["node_modules/@clayui/core/lib"],
      "@clayui/css": ["node_modules/@clayui/css/lib"],
      "@clayui/drop-down": ["node_modules/@clayui/drop-down/lib"],
      "@clayui/form": ["node_modules/@clayui/form/lib"],
      "@clayui/icon": ["node_modules/@clayui/icon/lib"],
      "@clayui/label": ["node_modules/@clayui/label/lib"],
      "@clayui/layout": ["node_modules/@clayui/layout/lib"],
      "@clayui/link": ["node_modules/@clayui/link/lib"],
      "@clayui/loading-indicator": ["node_modules/@clayui/loading-indicator/lib"],
      "@clayui/modal": ["node_modules/@clayui/modal/lib"],
      "@clayui/shared": ["node_modules/@clayui/shared/lib"],
      "@clayui/sticker": ["node_modules/@clayui/sticker/lib"],
      "@clayui/tooltip": ["node_modules/@clayui/tooltip/lib"]
    }
}

However, the workaround surfaces a more deep-seated TS error in ContainerFluid.d.ts: Type '"view" | "size" | "onError" | "containerElement" | "className" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 247 more ... | "key"' does not satisfy the constraint 'keyof IProps'. Type '"placeholder"' is not assignable to type 'keyof IProps'.ts(2344). This revealed itself when trying to use ClayLayout.ContainerFluid in my component as normal, like this:

<ClayLayout.ContainerFluid className="class-name" view>
    ....
</ClayLayout.ContainerFluid>

Also, I cannot simply use any other versions of React (say 18.3) because of this:

npm error Could not resolve dependency:
npm error peer react@"^18.2.0" from @clayui/alert@3.143.0
npm error node_modules/@clayui/alert
npm error   @clayui/alert@"^3.143.0" from the root project

Environment

Tech	Version
Clay	v3.143.0
React	v18.2.0

[github-actions]

Thanks for sending your Clay issue to PEDS Team.

@noahbowman, we appreciate your contribution, however, please be informed that we have transitioned away from using GitHub issues to track and prioritize our work. At present, we are exclusively utilizing LPS tickets for issue management. Therefore, we kindly request you to create your LPS tickets for any new matters or inquiries ;)

Link for How To Open a LPS Ticket to Clay

If you are an external contributor, we strongly recommend reaching out to our support team for further assistance :)

[bryceosterhaus]

@noahbowman thanks for the feedback, we recently switched how our packages are published and this looks like a bug. I will take a look and try to resolve it.

[bryceosterhaus]

@noahbowman can you try v3.143.1?

[noahbowman]

@bryceosterhaus - Thanks for updating me.

I still see errors like this one when when using <ClayLayout.ContainerFluid>

Type '{ children: (false | Element)[]; view: true; className: string; }' is missing the following properties from type 'Pick<IProps, "containerElement" | "size" | "className" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | ... 249 more ... | "key">': placeholder, onPointerEnterCapture, onPointerLeaveCapturets(2739)

and also this when using the placeholder property in <ClayDropDown.Search placeholder="search" />.

Type '{ value: string; onChange: (text: string) => void; placeholder: string; }' is not assignable to type 'IntrinsicAttributes & IProps'.
  Property 'placeholder' does not exist on type 'IntrinsicAttributes & IProps'.ts(2322)

--

It is only when I use 18.2.0 exactly for the react, react-dom, @types/react, and @types/react-dom dependencies together in my package.json like this do the errors go away:

"dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0"
},
"devDependencies": {
    "@types/react": "18.2.0",
    "@types/react-dom": "18.2.0"
}

Any other version/prefix combination such as ^18.2.0, ~18.2.0, or 18.3.0 resurfaces these errors. I'm unsure whether the intention is for Clay's latest version to solely support React 18.2.0 and its specific types or not, but that is what it appears to be doing.

The latest v3.143.2 does resolve the missing type exports I was seeing in v3.143.0, at least. Thank you for that fix!

Edit: I pulled the latest, thinking it was the .1 version you shared, but it was actually v3.143.2 I tested this all with.

[bryceosterhaus]

@noahbowman thanks for the info! I will take another look soon and see what we can resolve. We use react 18.2.0 for clay development and for Liferay DXP, so that is our primary target version. For the types packages, those can be hit and miss. I don't know if 18.2.0 of react exactly corresponds to 18.2.0 of the types package, at least in previously history there weren't an exact one-to-one.

A matter of fact, we actually still use 16.9.9 types in the clay repo and we use these types in DXP.

"@types/react": "18.2.19",
"@types/react-dom": "^18.2.12",

We likely need to update clay to use more recent types package, however that isn't a strong priority at the moment

[noahbowman]

@bryceosterhaus I also doubt that version 18.2.0 of the package directly corresponds to that same version for the type definitions, at least not since 18.2 was first rolled out. The two likely have separate release cycles, and the fact that both happen to work for me at version 18.2.0 is more a coincidence specific to when the Clay types fail in my project.

It is limiting since my other project dependencies are relying on different type versions, but I understand this isn't the highest priority. I have not tried those specific 18.2 type versions you shared, so I'll give them a try. In the meantime, I'll stick to 18.2.0.

Thank you for taking my feedback, and I appreciate the help!

[bryceosterhaus]

@noahbowman if you drop your TS version to 4.7.4, does that fix anything? I've noticed some complaints about similar things when using latest TS in vscode.

[noahbowman]

@bryceosterhaus - I am currently using the latest version of TS, and reducing to that version in my project prevents me from confirming anything since I have several other dependencies relying on TS 6+. Though, my assumption is it wouldn't make a difference with using a version of React and React Dom over 18.2.0, but I could be wrong.

Something hopefully helpful that I can share is I tried those type versions from DXP you mentioned, and they work. So, the latest versions I can manage with ClayUI are still 18.2.0 for react and react-dom (also confirmed with DXP) and 18.2.19 and ^18.2.12 for react and react-dom types respectively.