puppeteer with chromium on Linux fails and causes "Internal Error: need an svg element"

ondrej-such commented 1 year ago

Bug description

Rendering any quarto file with mermaid diagram to pdf results in internal error.

ERROR: Internal Error: need an svg element

Error: Internal Error: need an svg element

Steps to reproduce

Run quarto render essential.qmd --to pdf

A minimal file is the following

# Essential binary classification

```{mermaid diag1}
%%| label: fig-bias-dataset-model
%%| fig-cap: Two key prerequisities for development of a classification model
flowchart LR

X(Dataset) --> Y("classification model")
Z(Inductive bias) --> Y



### Expected behavior

No error should happen.

### Actual behavior

(base) ondrej@smicro:~$ quarto render essential.qmd --to pdf
ERROR: Internal Error: need an svg element

Error: Internal Error: need an svg element
    at resolveSize (file:///opt/quarto/bin/quarto.js:83711:15)
    at async makePng (file:///opt/quarto/bin/quarto.js:84047:57)
    at async makeDefault (file:///opt/quarto/bin/quarto.js:84097:24)
    at async Object.cell (file:///opt/quarto/bin/quarto.js:84120:20)
    at async Promise.all (index 0)
    at async Object.document (file:///opt/quarto/bin/quarto.js:57716:25)
    at async handleLanguageCells (file:///opt/quarto/bin/quarto.js:57687:42)
    at async file:///opt/quarto/bin/quarto.js:86617:61
    at async withTimingAsync (file:///opt/quarto/bin/quarto.js:19633:25)
    at async renderFiles (file:///opt/quarto/bin/quarto.js:86616:25)

### Your environment

- quarto : 1.3.433
- OS: Ubuntu 22.04.2 LTS
- R: 4.3.1

### Quarto check output

(base) ondrej@smicro:~$ quarto check

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.3.433
      Path: /opt/quarto/bin

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

[✓] Checking Python 3 installation....OK
      Version: 3.8.5 (Conda)
      Path: /home/ondrej/miniconda3/bin/python
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with conda install jupyter

      There is an unactivated Python environment in torch1. Did you forget to activate it?

[✓] Checking R installation...........OK
      Version: 4.3.1
      Path: /usr/lib/R
      LibPaths:
        - /home/ondrej/R/x86_64-pc-linux-gnu-library/4.3
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.43
      rmarkdown: 2.6

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

ondrej-such commented 1 year ago

The same source works fine on Windows, quarto version 1.3.450

Output: C:\Users\Ondrej\Downloads>quarto render essential.qmd --to pdf

processing file: essential.qmd

output file: essential.knit.md

pandoc to: latex output-file: essential.tex standalone: true pdf-engine: xelatex variables: graphics: true tables: true default-image-extension: pdf

metadata documentclass: scrartcl classoption:

DIV=11
numbers=noendperiod papersize: letter header-includes:
'\KOMAoption{captions}{tableheading}' block-headings: true

running xelatex - 1 This is XeTeX, Version 3.141592653-2.6-0.999994 (MiKTeX 22.8.28) (preloaded format=xelatex.fmt) restricted \write18 enabled. entering extended mode

running xelatex - 2 This is XeTeX, Version 3.141592653-2.6-0.999994 (MiKTeX 22.8.28) (preloaded format=xelatex.fmt) restricted \write18 enabled. entering extended mode

Output created: essential.pdf

ondrej-such commented 1 year ago

Upgrading to 1.3.450 on Ubuntu did not help.

(base) ondrej@smicro:/tmp$ sudo dpkg -i quarto-1.3.450-linux-amd64.deb (Reading database ... 321918 files and directories currently installed.) Preparing to unpack quarto-1.3.450-linux-amd64.deb ... Unpacking quarto (1.3.450) over (1.3.433) ... Setting up quarto (1.3.450) ... (base) ondrej@smicro:/tmp$ cd ~ (base) ondrej@smicro:~$ quarto render essential.qmd --to pdf ERROR: Internal Error: need an svg element

Error: Internal Error: need an svg element at resolveSize (file:///opt/quarto/bin/quarto.js:83711:15) at async makePng (file:///opt/quarto/bin/quarto.js:84047:57) at async makeDefault (file:///opt/quarto/bin/quarto.js:84097:24) at async Object.cell (file:///opt/quarto/bin/quarto.js:84120:20) at async Promise.all (index 0) at async Object.document (file:///opt/quarto/bin/quarto.js:57716:25) at async handleLanguageCells (file:///opt/quarto/bin/quarto.js:57687:42) at async file:///opt/quarto/bin/quarto.js:86617:61 at async withTimingAsync (file:///opt/quarto/bin/quarto.js:19633:25) at async renderFiles (file:///opt/quarto/bin/quarto.js:86616:25) (base) ondrej@smicro:~$

cscheid commented 1 year ago

Are you able to try rendering this again after installing google chrome? We've had a recurring source of issues where quarto can't locate a web browser in order to be able to extract the dynamically-generated figure from the webpage.

You also have a minor issue in your syntax:

# Essential binary classification

```{mermaid diag1}
%%| label: fig-bias-dataset-model
%%| fig-cap: Two key prerequisities for development of a classification model
flowchart LR

X(Dataset) --> Y("classification model")
Z(Inductive bias) --> Y



The `{mermaid diag1}` syntax is specific to knitr and not supported in quarto. It might not be hurting here but it's not something that quarto is designed to handle.

mcanouil commented 1 year ago

Note that Quarto can help you install a headless version of Chrome, see https://quarto.org/docs/authoring/diagrams.html#chrome-install.

quarto tools install chromium

ondrej-such commented 1 year ago

Reinstalling chromium did not help.

(base) ondrej@smicro:~$ quarto tools uninstall chromium ? Are you sure you'd like to remove chromium? (Y/n) › Yes

Uninstalling chromium [✓] Removing Chromium... Uninstallation successful (base) ondrej@smicro:~$ quarto tools install chromium Installing chromium [✓] Downloading Chromium 869685 [✓] Installing Chromium 869685 Installation successful (base) ondrej@smicro:~$ quarto render essential.qmd --to pdf ERROR: Internal Error: need an svg element

Error: Internal Error: need an svg element at resolveSize (file:///opt/quarto/bin/quarto.js:83711:15) at async makePng (file:///opt/quarto/bin/quarto.js:84047:57) at async makeDefault (file:///opt/quarto/bin/quarto.js:84097:24) at async Object.cell (file:///opt/quarto/bin/quarto.js:84120:20) at async Promise.all (index 0) at async Object.document (file:///opt/quarto/bin/quarto.js:57716:25) at async handleLanguageCells (file:///opt/quarto/bin/quarto.js:57687:42) at async file:///opt/quarto/bin/quarto.js:86617:61 at async withTimingAsync (file:///opt/quarto/bin/quarto.js:19633:25) at async renderFiles (file:///opt/quarto/bin/quarto.js:86616:25) (base) ondrej@smicro:~$

cscheid commented 1 year ago

Thanks for following up. Do you have access to Google Chrome itself (instead of chromium through our tools)?

ondrej-such commented 1 year ago

Installing google-chrome indeed prevents the internal bug. I used

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

After installing it via dpkg -i , the error does not reproduce.

(base) ondrej@smicro:~$ quarto render essential.qmd --to pdf pandoc to: latex output-file: essential.tex standalone: true pdf-engine: xelatex variables: graphics: true tables: true default-image-extension: pdf

metadata documentclass: scrartcl classoption:

DIV=11
numbers=noendperiod papersize: letter header-includes:
'\KOMAoption{captions}{tableheading}' block-headings: true

running xelatex - 1 This is XeTeX, Version 3.141592653-2.6-0.999993 (TeX Live 2022/dev/Debian) (preloaded format=xelatex) restricted \write18 enabled. entering extended mode

running xelatex - 2 This is XeTeX, Version 3.141592653-2.6-0.999993 (TeX Live 2022/dev/Debian) (preloaded format=xelatex) restricted \write18 enabled. entering extended mode

Output created: essential.pdf

(base) ondrej@smicro:~$

cscheid commented 1 year ago

Thanks for confirming! We've never been able to track down precisely why some installs of chromium on Linux cause puppeteer to fail.

I'm going to keep this open, but unfortunately I don't have any better workaround to offer right now.

cderv commented 1 year ago

It seems similar to issue with WSL where chromium can't be installed, and full chrome is needed

We now ask WSL user to install manually like this https://github.com/quarto-dev/quarto-cli/blob/f9bb1ebf6a5b0b879a5f885f16b84ff924fba277/src/tools/tools.ts#L89-L95

Maybe it is something related to a component missing...

Anyhow, just mentionning for referencing and cross linking

younes-io commented 9 months ago

@cderv : I did all of the suggested steps manually on WSL2, yet the error still persists

➜ google-chrome --version
Google Chrome 120.0.6099.129 
(base)


➜ quarto render          
[ 1/60] 404.qmd
ERROR: Theme file compilation failed:

Error: Undefined variable.
    ╷
947 │ $primary:                    $spc-primary-light;
    │                              ^^^^^^^^^^^^^^^^^^
    ╵

Error: Theme file compilation failed:

Error: Undefined variable.
    ╷
947 │ $primary:                    $spc-primary-light;
    │                              ^^^^^^^^^^^^^^^^^^
    ╵
    at dartCommand (file:///opt/quarto/bin/quarto.js:59894:15)
    at async dartCompile (file:///opt/quarto/bin/quarto.js:59856:5)

cderv commented 8 months ago

@younes-io first screenshot you posted was related, and the messages told you what to do. If you don't have the message anymore it means it worked.

Now you get this :

ERROR: Theme file compilation failed:

this errors seems to have no relation to chromium, and Internal Error on svg element. Please to post on existing thread when this is directly related and complement other answers. In your case it is best to open a new help question in https://github.com/quarto-dev/quarto-cli/discussions or a new issue if you think this is a bug.

Hint: I would check you theme file for spc-primary-light variables in SCSS. The message is pretty clear: it is not seen as defined. So possibly missing variables, or wrong order of theme file resolution. More on that at

If you still have problem, feel free to reach out in a new thread.

Thank you

quarto-dev / quarto-cli

puppeteer with chromium on Linux fails and causes "Internal Error: need an svg element" #6821

Bug description

Steps to reproduce