vite-ssg build fails for markdown with HTML characters in code block

SimonScholz commented 11 months ago

Describe the bug

I just forked the vitesse template and simply added these 3 lines to the about.md file in the src/pages folder.

https://github.com/SimonScholz/vitesse/blob/0067d54543b99da70e0a8c2776b0a318436b9c03/src/pages/about.md?plain=1#L22

While running pnpm dev is just fine and everything is rendered as expected, doing a pnpm build results into this failure:

[vite-ssg] Rendering Pages... (3)
[vite-ssg] Critical CSS generation enabled via `critters`
file:///home/simon/git/simon/vitesse/node_modules/.pnpm/vite-ssg@0.23.0_@unhead+vue@1.1.30_critters@0.0.19_vite@4.4.3_vue-router@4.2.4_vue@3.3.4/node_modules/vite-ssg/dist/node.mjs:1062
        throw new Error(`${gray("[vite-ssg]")} ${red(`Error on page: ${cyan(route)}`)}
              ^

Error: [vite-ssg] Error on page: /about
Error: Parse Error: <</span><span style="color:#5DA994;">Map</span><span style="color:#DBD7CAEE;"><</span><span style="color:#5DA994;">String</span><span style="color:#DBD7CAEE;">, </span><span style="color:#5DA994;">String</span><span style="color:#DBD7CAEE;">>> </span><span style="color:#CB7676;">=</span><span style="color:#DBD7CAEE;"> </span><span style="color:#80A665;">mapOf</span><span style="color:#DBD7CAEE;">()</span></span>

It seems that the actual error lies in having << two times here:

Somehow using < in my kotlin/java code snippets, which may consist of many < break the vite-ssg build.

Using < and > does not work because they are rendered as is, which is not the result I was hoping for. I've even tried to configure Markdown with html=true in the vite.config.ts file :

markdownItSetup(md) {
  md.set({
    html: true,
  })

And also tried to escape the < somehow, but all that did not work for me.

The interesting thing is that running pnpm dev just runs fine and renders everything as expected.

Support or advice would be highly appreciated here. In case Markdown rendering does not work I would have to switch back to using React JS with Gatsby for rendering my code snippets in Markdown :-(

Reproduction

https://github.com/SimonScholz/vitesse

System Info

System:
    OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 12.38 GB / 30.89 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.3.1 - ~/.nvm/versions/node/v20.3.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v20.3.1/bin/npm
    pnpm: 8.6.7 - ~/.nvm/versions/node/v20.3.1/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.102

Used Package Manager

pnpm

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guide.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
[X] The provided reproduction is a minimal reproducible of the bug.

rainbowatcher commented 11 months ago

I have also encountered this issue, and from the build logs, I suspect that the error occurred during the process of the Critters plugin's work. After upgrading the Critters plugin to the latest version, I faced this problem. However, when I reverted the version back to 0.0.18, the issue no longer occurred. I have not delved deeper into the root cause of the problem, but I hope this information might be helpful to you.

SimonScholz commented 11 months ago

Thanks a lot. That did the trick.

antfu-collective / vite-ssg