Hydration issue when props have strings with newlines

[mraerino]

When hydrating a component that gets passed props with values that are strings with newlines, i get this error in the browser:

main.4cbde32973bc4eb1fe2d.js:1 Could not hydrate interactive components. Error: Unexpected token 
 in JSON at position 799

The JSON that was rendered into the page as a comment:

{"id":"0","loc":"start","componentName":"BlogPost","props":"{\"functions\":{},\"pkg\":{\"name\":\"kalkspace-relaunch\",\"version\":\"1.0.0\",\"description\":\"\",\"main\":\"index.js\",\"scripts\":{\"develop\":\"ELEVENTY_EXPERIMENTAL=true eleventy --serve\"},\"keywords\":[],\"author\":\"\",\"license\":\"ISC\",\"devDependencies\":{\"@11ty/eleventy\":\"^0.12.1\"},\"dependencies\":{\"@babel/core\":\"^7.16.10\",\"@babel/preset-env\":\"^7.16.11\",\"@babel/preset-react\":\"^7.16.7\",\"babel-loader\":\"^8.2.3\",\"core-js\":\"^3.20.3\",\"eleventy-plugin-react\":\"^1.1.0\",\"react\":\"^17.0.2\",\"react-dom\":\"^17.0.2\",\"regenerator-runtime\":\"^0.13.9\"}},\"layout\":\"blogpost.jsx\",\"title\":\"Hello\",\"tags\":[\"cat\",\"dog\"],\"page\":{\"date\":\"2022-01-21T13:16:05.133Z\",\"inputPath\":\"./src/posts/hello.md\",\"fileSlug\":\"hello\",\"filePathStem\":\"/posts/hello\",\"url\":\"/posts/hello/\",\"outputPath\":\"_site/posts/hello/index.html\"},\"content\":\"<p>Cats, dogs.</p>\n\",\"layoutContent\":\"<p>Cats, dogs.</p>\n\",\"_layoutContent\":\"<p>Cats, dogs.</p>\n\",\"children\":null}"}

This is likely related to brokenness when calling JSON.stringify twice on strings with newlines. the places inside of props where you see \n should likely be \\n.

[kaicataldo]

Hmmm yeah, this is definitely not a case I considered! We should definitely make the serialization logic handle stringified JSON correctly.