Next.js Error Message

[Doug]

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)

[Doug]

Updated page file

[Wissam]

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

[Wissam]

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:

• https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr

Regards,
Wissam
Progress Telerik

[Doug]

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?

[Wissam]

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