Weird whitespace behaviour in Next

Unanswered

Mozzy posted this in #help-forum

2023-08-19T20:10:25.000Z

I am facing an issue after trying out generateStaticParams.
Getting multiple "Minified React error" related to hydration.
The issue is visible in the GIF. The description is

<p className="whitespace-pre-line">{project.description}</p>

and yet the whitespace flickers.

7 Replies

MozzyOP

2023-08-19T21:05:42.000Z

Did something hacky to avoid relying on linebreaks and whitespace-pre-line

Asian black bear

2023-08-20T00:09:19.000Z

@Mozzy I am assuming this is some kind of an issue with minification, because the process does not understand the implications of CSS making whitespace more significant...

using <br/> is another option ðŸ™‚

MozzyOP

2023-08-20T00:11:50.000Z

Yup, but my data is just strings in this case

Asian black bear

2023-08-20T00:19:26.000Z

That is kind of a pain. Maybe try doing something like {dataString.split(/\n/).map((s)=><>{s}<br/></>)}

use the full fragment syntax to add a key <React.Fragment key={your key}>

the index is probably reasonable if your string never changes