DOESN'T WORK WITH REACT 18

Been trying to get support with this one for a few days now.

pm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project@0.1.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6 || ^17.0.0" from @contentful/rich-text-react-renderer@15.12.0
npm ERR! node_modules/@contentful/rich-text-react-renderer
npm ERR!   @contentful/rich-text-react-renderer@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\toms\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\toms\AppData\Local\npm-cache\_logs\2022-04-05T07_51_02_132Z-debug-0.log

This means it’s incompatible with npx create-react-app and npx create-next-app.

[doflo-dfa]

<>{documentToReactComponents(post.fields.post, {
              renderNode: {
                paragraph: (node, children) => {
                  return <span className="block text-justify mb-6">{children}</span>;
                }, ...
            })}</>

[doflo-dfa]

One thing to note documentToReactComponents wraps it’s return content in a < p > tag by default … react 18 will complain in development and production about nested p tags so if you are adding content to a template that already has a superior p tag it will cause react 18 to not properly server side to client side transition because of this validation in strict mode … as a work around ensure all superior p tags are span tags styled with display:block