Search code examples
tinymcenext.js

Warning: Prop `id` did not match. using tinymce with next js

hi i'm using tinymce for react from this doc TinyMCE Doc link

and it works but i get this warning from console

warning screenshot

im using "next": "^8.0.1", and @tinymce/tinymce-react": "^3.0.1"

so why this happen? anyone can help me? thanks

Solution

  • Seeing as you're using Next.js, this issue usually happens when you're initializing something in your render method or Functional Component function body that should properly belong in a lifecycle handler.

    If you don't have a particular reason to server-render TinyMCE, you can try to do it on the client side only.

    Try moving some of the code that initializes TinyMCE in your componentDidMount or useEffect Hook (depending on whether you're using a Class Component or Functional Component with Hooks).

    This will both avoid the SSR vs browser mismatch issues and ease the load on your server.