Unrecoverable Hydration Mismatch for markdown pages

[xarthurx]

Describe the bug

When using .md file for pages, refreshing the page will cause Unrecoverable Hydration Mismatch. error.

To be specific, I have a list of markdown files as pages, and a parent page to show all the clickable titles.

1. Accessing the parent page -- no problem.
2. Accessing the son page from the link in the parent page -- no problem.
3. After 2, refreshing the page -- HAVE error.
4. Accessing the link of any son-page directly from the browser -- HAVE error.

Error screenshot

Your Example Website or App

https://stackblitz.com/github/xarthurx/blogTest

Steps to Reproduce the Bug or Issue

See description above.

Expected behavior

Refreshing the page will cause no error.

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome
• Version: latest

Additional context

I tried a markdown file with only frontmatter, this has no problem.

But once the markdown file has both frontmatter and main context, the error occured.

[ryansolid]

I think this is going to come down to what the markdown transform is. The link for the reproduction doesn't lead to a project so I can't tell you off hand. But your best bet is to submit this against the markdown transform library you are using as it appears to produce unexpected output.

[xarthurx]

Thank you for the reply.

I updated the App, and you can see the code. But stackblitz shows solid-start is producing error with Promise:

For the markdown parser, I only use:

    "remark-gfm": "^3.0.1",
    "remark-frontmatter": "^4.0.1",
    "remark-mdx-frontmatter": "^3.0.0",

to parse frontmatters, and format, besides the default solid-start template with mdx enabled.

[xarthurx]

BTW, the error from the browser console also shows something about Promise -- I'm not an expert in this field, but would it be possible that that is the cause?

[xarthurx]

Even with a md file

---
title: "Test Blog"
date: 2023-04-06T16:54:25+02:00
draft: false
---

# Title

I can reproduce this error.

[ryansolid]

Most Markdown transforms don't work for us because they produce code that doesn't work with the way we render so we have specialized md/mdx plugins. Does anyone know if Remark works with Solid? @lxsmnsyc

[lxsmnsyc]

Most Markdown transforms don't work for us because they produce code that doesn't work with the way we render so we have specialized md/mdx plugins. Does anyone know if Remark works with Solid? @lxsmnsyc

I'm not sure which Markdown plugin works but iirc there's a Solid + Markdown plugin that works with Solid Start, I'm just not sure if it uses Remark under the hood.

[ryansolid]

I mean we are pretty much speculating without a working reproduction. The repo doesn't exist or is private so not much to do here.