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

ondrej-such · 2023-09-13T12:58:02Z

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

The text was updated successfully, but these errors were encountered:

ondrej-such · 2023-09-13T13:08:26Z

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 · 2023-09-13T13:10:52Z

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 · 2023-09-13T18:45:45Z

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 · 2023-09-13T19:11:50Z

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 · 2023-09-14T08:02:11Z

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 · 2023-09-14T14:33:27Z

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

ondrej-such · 2023-09-14T17:43:00Z

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 · 2023-09-14T18:23:01Z

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 · 2023-09-22T15:52:48Z

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

quarto-cli/src/tools/tools.ts

Lines 89 to 95 in f9bb1eb

    
           const troubleshootUrl = 
        
             "https://pptr.dev/next/troubleshooting#running-puppeteer-on-wsl-windows-subsystem-for-linux."; 
        
           warning([ 
        
             `${name} can't be installed fully on WSL with Quarto as system requirements could be missing.`, 
        
             `- Please do a manual installation following recommandations at ${troubleshootUrl}`, 
        
             "- See https://github.com/quarto-dev/quarto-cli/issues/1822 for more context.", 
        
           ].join("\n"));

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

Anyhow, just mentionning for referencing and cross linking

younes-io · 2023-12-30T11:06:41Z

younes-io · 2023-12-30T12:48:32Z

@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 · 2024-01-03T11:32:52Z

@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

ondrej-such added the bug Something isn't working label Sep 13, 2023

mcanouil added diagrams-mermaid Mermaid diagrams latex LaTeX engines related libraries and technologies labels Sep 13, 2023

cscheid added the puppeteer Issues with puppeteer and remote chromium rendering label Sep 14, 2023

cscheid changed the title ~~Internal Error: need an svg element~~ puppeteer with chromium on Linux fails and causes "Internal Error: need an svg element" Sep 14, 2023

cscheid self-assigned this Sep 14, 2023

cscheid removed diagrams-mermaid Mermaid diagrams latex LaTeX engines related libraries and technologies labels Sep 14, 2023

cscheid added this to the v1.5 milestone Nov 30, 2023

cscheid modified the milestones: v1.5, Future Feb 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ondrej-such commented Sep 13, 2023

ondrej-such commented Sep 13, 2023

ondrej-such commented Sep 13, 2023

cscheid commented Sep 13, 2023

mcanouil commented Sep 13, 2023

ondrej-such commented Sep 14, 2023

cscheid commented Sep 14, 2023

ondrej-such commented Sep 14, 2023

cscheid commented Sep 14, 2023

cderv commented Sep 22, 2023

younes-io commented Dec 30, 2023

younes-io commented Dec 30, 2023 •

edited

Loading

cderv commented Jan 3, 2024 •

edited

Loading

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

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

Comments

ondrej-such commented Sep 13, 2023

Bug description

Steps to reproduce

Expected behavior

Actual behavior

Your environment

Quarto check output

ondrej-such commented Sep 13, 2023

ondrej-such commented Sep 13, 2023

cscheid commented Sep 13, 2023

mcanouil commented Sep 13, 2023

ondrej-such commented Sep 14, 2023

cscheid commented Sep 14, 2023

ondrej-such commented Sep 14, 2023

cscheid commented Sep 14, 2023

cderv commented Sep 22, 2023

younes-io commented Dec 30, 2023

younes-io commented Dec 30, 2023 • edited Loading

cderv commented Jan 3, 2024 • edited Loading

younes-io commented Dec 30, 2023 •

edited

Loading

cderv commented Jan 3, 2024 •

edited

Loading