Prop Mismatch on Client vs Server [NextJS]

[boncz92]

Issue is presenting itself when using nextjs which by default uses Server Components. I tried wrapping the component in a wrapper using the 'use client' directive but still seeing the issue. Curious if any one else has run into this and has some insight into how to fix it.

[boncz92]

Warning: Prop id did not match. Server: "EZDrawercheckbox0v6vrl" Client: "EZDrawercheckboxna3je"

[AguacateVelarde]

Hey there! You might consider using dynamic import. Here's the component

const Drawer = dynamic(() => import('react-modern-drawer'), {
  suspense: true,
});

const MyComponent = () => (
  <Drawer>...</Drawer>
);

[greengem]

Hey there! You might consider using dynamic import. Here's the component

const Drawer = dynamic(() => import('react-modern-drawer'), {
  suspense: true,
});

const MyComponent = () => (
  <Drawer>...</Drawer>
);

This indeed fixes the error but now the drawer has no animation, when opening it appears immediately.

[baktun14]

I get the same error as well.

[epignosisx]

Use the customIdSuffix prop. It solved my problem because now it will use this id in the server and client instead of generating a different one on each side.

[boncz92]

Use the customIdSuffix prop. It solved my problem because now it will use this id in the server and client instead of generating a different one on each side.

Right on the money. Thanks man.