Mermaid rendering to PDF broken with `quarto install chromium` version

[sasja-san]

Bug description

I'm not able to render this code to a PDF. The Mermaid code was taken from here: https://quarto.org/docs/authoring/diagrams.html#mermaid

---
title: Mermaid Test
format: pdf
---


# Hello!


```{mermaid}
sequenceDiagram
  participant Alice
  participant Bob
  Alice->>John: Hello John, how are you?
  loop Healthcheck
    John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts <br/>prevail!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!
```

Here's the error I get:

$ quarto render mermaid-test.qmd
ERROR: Internal Error: Couldn't find an svg element in svg string

This is a bug in quarto. We apologize for the inconvenience.
Please consider reporting it at https://github.com/quarto-dev/quarto-cli. Thank you!

Stack trace:
    at resolveSize (file:///home/sasja/.quarto/quarto-cli/src/core/svg.ts:24:11)
    at eventLoopTick (ext:core/01_core.js:175:7)
    at async makePng (file:///home/sasja/.quarto/quarto-cli/src/core/handlers/mermaid.ts:353:11)
    at async makeDefault (file:///home/sasja/.quarto/quarto-cli/src/core/handlers/mermaid.ts:435:16)
    at async Object.cell (file:///home/sasja/.quarto/quarto-cli/src/core/handlers/mermaid.ts:475:14)
    at async Promise.all (index 0)
    at async Object.document (file:///home/sasja/.quarto/quarto-cli/src/core/handlers/base.ts:577:20)
    at async handleLanguageCells (file:///home/sasja/.quarto/quarto-cli/src/core/handlers/base.ts:529:34)
    at async file:///home/sasja/.quarto/quarto-cli/src/command/render/render-files.ts:631:41
    at async withTimingAsync (file:///home/sasja/.quarto/quarto-cli/src/core/timing.ts:50:20)

Quarto check & version

I'm using the latest commit on main branch:

git show -s --format="%as %H"
2024-10-02 9d00acae2607c1d0fae479b0b8f830145454b207

From quarto check:

Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 9d00acae2607c1d0fae479b0b8f830145454b207
      Path: /home/sasja/.quarto/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2024.03.13
      Chromium: 869685

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /home/sasja/.TinyTeX/bin/x86_64-linux
      Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.5
      Path: /usr/bin/python3
      Jupyter: 5.7.2
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

[cderv]

Just to share on Windows this is rendering ok for me.

[cscheid]

I also can't repro myself, either on 1.6.18 or main, on macOS.

[sasja-san]

I'm using Manjaro Linux. Is there something I could do to test what might be going on? Maybe there are clues in the call stack?

[mcanouil]

@sasja-san See https://quarto.org/docs/troubleshooting/index.html

[sasja-san]

@sasja-san See https://quarto.org/docs/troubleshooting/index.html

The only thing that I did there (which was applicable to me, the env variable settings gave me nothing) was update my install of TinyTex from v2024.03.13 to v2024.10 - but the error remains.

I dug around a bit in the code trying to figure out what's wrong. I don't know any typescript so I don't really know what I'm doing. Anyway, in src/core/svg.ts i added some code at around line 23:

 const dom = (await getDomParser()).parseFromString(svg, "text/html");
  const svgEl = dom?.querySelector("svg");

  if (!svgEl) {
    throw new InternalError("Couldn't find an svg element in svg string"
                            + "\n\tdom   = " + dom
                            + "\n\tsvgEl = " + svgEl);
  }

which gave me this output:

ERROR: Internal Error: Couldn't find an svg element in svg string
	dom   = [object EventTarget]
	svgEl = null

I would try to make a long string with all the things in this dom object as well, but I don't really know how that's done. Basically what I want to do is something like

let s = "";
foreach e in dom {
    s += e;
}

If anyone could help me with this, then I can dig a little deeper.

[github-actions]

Thank you for using Quarto and reporting an issue!

Unfortunately, this issue is now considered stale because it has been opened since 14 days without providing a "working" reproducible example to help us investigate.
If you are still facing the issue, please review the "Bug Reports" guide on how to provide a fully reproducible example as a self-contained Quarto document or a link to a Git repository.
Without a reproducible example, it is unlikely that the issue will be addressed.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[cderv]

@sasja-san can you try with Quarto v1.5 and latest Quarto v1.6 ? Though we are facing #11135 if you have recent build of chrome :(

[cscheid]

Yeah, I think this is "just" a duplicate of #11135

[sasja-san]

Sorry I missed this. The tab was active on a virtual desktop I didn't look at for a while, so I cleared the notification without noticing.

I installed and tested with both 1.5.57 and 1.6.31.

Verson 1.6 gave me the same error but version 1.5 gave me a pdf.

As I said previously, I don't know any typescript. But if any of you have suggestions for some code I could use to proceed with poking around I'd gladly try it out.

[cderv]

Is this still with the same example shared above in #10961 (comment) ?

I still can't reproduce. What is your chrome version on your system ?

To debug further, you can activate Debug logging (https://quarto.org/docs/troubleshooting/#verbose-mode) and see if anything else is helping.

The thing I would if I was able to reproduce would be to try interactively debug dev version inside VSCODE. We don't have a step by step guide for that yet, so one would need to be confortable with VSCODE debugging and quarto dev.

Hopefully, we'll manage to find a reproducible environment for that. Which OS are you on ?

[sasja-san]

Is this still with the same example shared above in #10961 (comment) ?

Yes.

What is your chrome version on your system ?

From quarto check.

[✓] Checking tools....................OK
      TinyTeX: v2024.10
      Chromium: 869685

To the best of my knowledge I have no other instances of chromium installed. Except maybe bundled ones, if that's what Electron is doing.
Do you have some command for me which I could run to check that I don't have some fishy stuff on my system?

so one would need to be confortable with VSCODE debugging and quarto dev.

I'm cool with this. I even wrote a tutorial (rendered using Quarto) about debugging in VS Code:
https://github.com/sasja-san/vscode-remote-debug-example

I have pretty much zero experience of TypeScript, though. But that's subject to change ;)

Which OS are you on ?

(though the image there lies, as I have now installed a 65W CPU in my nine years old powerhouse of a computer XD)