I've used your basic instructions to set up a Data Grid. However, I get an error when I add KendoReact's <Grid> component.
How do I get rid of this error?
Warning: Prop `style` did not match. Server: "border-width:0" Client: "null"
at div
at div
at Header (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-grid/dist/es/header/Header.js:47:47)
at div
at Grid (webpack-internal:///(app-pages-browser)/./node_modules/@progress/kendo-react-grid/dist/es/Grid.js:154:28)
at Home (webpack-internal:///(app-pages-browser)/./app/page.tsx:19:72)
at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:240:11)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:337:11)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:151:9)
at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:226:11)
at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:347:11)
at body
at html
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:147:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:417:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:123:11)
at RSCComponent
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:139:11)5 Answers, 1 is accepted
Rank 2
Iron
Iron
Iron
Hi, Doug,
Thank you for providing an example and the error message.
We are currently in the process of testing all the KendoReact components in the Nextjs environment and fixing all the issues that come up and we will soon be officially compatible with it.
Basically, we are aware of the `prop style did not match` warning for the Data Grid but we currently do not have a workaround for it as it should be fixed internally. However, it does not cause any issues with the Grid functionality.
If you have any further questions on this matter, please let me know.
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
While testing the Grid in Nextjs I was able to resolve this issue when importing the Grid using the dynamic import and setting `ssr` to false:
const Grid: any = dynamic(
() =>
import("@progress/kendo-react-grid").then(
(module) => module.Grid
) as any ,
{
ssr: false
}
);However, this is just a workaround as this imports the package on the client side and not on the server side.
For more information on Lazy Loading with no SSR, you can check the following article:
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 2
Iron
Iron
Iron
Wissam,
I can't say enough GOOD THINGS about your help with this. Thanks very much for helping me resolve this error.
Doug
P.S. How do I get this to the forum?
You are welcome, Doug. I am really glad that my reply was helpful to you.
I converted this thread to a public forum item based on your request.
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!