NextJS: React does not recognize the dataTw prop

[prateekkarki]

I am using twin.macro on my NextJS app with emotion. I keep getting this error on my console. It is because of the data-tw prop that is passed for debugging.

Does this warning represent something wrong I might have done during setup? Is there an underlying issue because of this?
If not, is there a way I can suppress this warning.
I am using the same setup as explained in Next/Emotion Docs.

[ben-rogerson]

That's interesting - I haven't seen that error before, perhaps it's a server rendering issue?
Twin adds the prop as kebab case.

You can turn off the data-tw prop feature in your twin config with debugProp:

debugProp: false

[prateekkarki]

Later I noticed that it was only getting the warning for CloudinaryContext component from cloudinary-react. I had used it as below to save an extra div

<CloudinaryContext
   cloudName={process.env.NEXT_PUBLIC_CLOUDINARY_NAME}
    css={tw`rounded-t-md w-full h-64 overflow-hidden`}
>
    <Image .../>

I added css to a div and it fixed it. Thanks for your help 👍