[Bug] useId, react-dom/client, and react-dom/server errors in React 17

[WissamProgress]

I'm submitting a...

• Regression report

Current behavior

Using KendoReact in React 17 results in errors related to the useId hook, react-dom/client, and react-dom/server. This could be due to bundler changes as this was working before.

Expected behavior

KendoReact works in React 17 as it is a supported version.

Minimal reproduction of the problem with instructions

1. Create a react 17 application
2. import any package - shows the useId error
3. import the Grid, Treelist, and PDF packages - shows the rest of the errors

Related GitHub issues: #2077 & #1954

Reported in 1653508

In Nextjs 15 RC

../../packages/pdf/src/grid/provideSaveGridPDF.tsx
Attempted import error: 'render' is not exported from 'react-dom' (imported as 'ReactDOM').
../../packages/pdf/src/treelist/provideSaveTreeListPDF.tsx
Attempted import error: 'render' is not exported from 'react-dom' (imported as 'ReactDOM').

[abaingardiant]

How long it will take?

[WissamProgress]

useId

For the useId error, the bug fix is available on version KendoReact dev version 8.1.0-develop.11 (latest dev version). It will be available in the upcoming official release.

react-dom/server

This is specific to react 17 and CRA, and is related to how CRA consumes ESM modules.
It can be fixed by modifying the webpack configuration where you can modify the react-dom/server alias. It should be set to react-dom/server.js to work in React 17 and CRA.

The easier option would be to install react-app-rewired or a similar package, that allows you to modify the webpack without ejecting.

npm install react-app-rewired --save-dev

Create a file in the root of your project called config-overrides.js with the following contents:

module.exports = function override(config, env) {
    config.resolve.alias["react-dom/server"] = "react-dom/server.js";
    return config;
}

replace the following scripts in your package.json:

"react-scripts start" -> "react-app-rewired start"
"react-scripts build" -> "react-app-rewired build"

The other option would be to run npm run eject and set this in webpack.config.js.

react-dom/client (createRoot) and react/dom (ReactDOM.render)

For the PDF export for the TreeList and Grid, we are using createRoot or ReactDOM.render based on the React version. The react-dom/client import is causing an error for React 17, while the deprecated ReactDOM.render is causing an error in React 19.

As a solution for the React 17 users, use the 7.2.3 version of @progress/kendo-react-pdf as it only imports react-dom and not react-dom/client. We will research for a solution that does not break any React version as we support from version 16.8.2 and we will support 19 when it gets released. We will create a new GitHub issue for this bug and link it here.

[abaingardiant]

i am using @progress/kendo-react-editor which has @progress/kendo-react-pdf dependency and if I downgrade editor again its has dependencies on common , button , So I can not upgrade partially to kendo 8 in react 17. How long it will take for PDF to support react-dom/client

[WissamProgress]

Hi @abaingardiant
Apologies for the inconvenience caused to you by the issue related to the pdf package. The GitHub issue for it is a work in progress. It will be updated when there is any progress on the bug fix - #2306

As a current workaround I can suggest using --force or --legacy-peer-deps for installing incompatible dependencies. However, lets continue the discussion on the support ticket you have opened.