smooth-scroll can lead to an Error with the require package of javascript

ElmarGeersHy commented 4 days ago

Bug description

Disclaimer: I have very little experience with JS and coding in general, please forgive my ignorance

Rendering a HTML "smooth-scroll: true" with Quarto leads to an error when opening this HTML on a browser.

I have a QMD-file with a bunch of python code which uses plotly the generate some plots. If smooth-scroll is set to true, the HTML-file resulting from "quarto render" gets this line at the end of the file.

<script src="report_zuflussprognose_files/libs/quarto-html/zenscroll-min.js"></script>

Opening this file leads to the following error, which subsequently prevents plotly plots from being rendered in the browser:

Uncaught Error: Mismatched anonymous define() module: [object Object]
https://requirejs.org/docs/errors.html#mismatch
    makeError https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1
    T https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1
    s https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1

Manually editing the HTML-file and cutting and pasting the line to the top of the file ( above the line where require.min.js is loaded), solves the issue. This post helped me to get the idea for the workaround. https://stackoverflow.com/a/23467090

Steps to reproduce

title: "Title" subtitle: "Subtitle" title-block-banner: true format: html: embed-resources: false smooth-scroll: true theme: cosmo fontcolor: black toc: true toc-location: right toc-title: Inhalt toc-depth: 3 css: styles.css execute: echo: false

Expected behavior

No Erros when openening the HTML

Actual behavior

Uncaught Error: Mismatched anonymous define() module: [object Object] https://requirejs.org/docs/errors.html#mismatch makeError https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1 T https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1 s https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1

Your environment

No response

Quarto check output

Quarto 1.5.57 [>] Checking versions of quarto binary dependencies... Pandoc version 3.2.0: OK Dart Sass version 1.70.0: OK Deno version 1.41.0: OK Typst version 0.11.0: OK [>] Checking versions of quarto dependencies......OK [>] Checking Quarto installation......OK Version: 1.5.57 Path: C:\Program Files\Quarto\bin CodePage: 1252

[>] Checking tools....................OK TinyTeX: v2023.04 Chromium: (not installed)

[>] Checking LaTeX....................OK Using: TinyTex Path: C:\Users*\AppData\Roaming\TinyTeX\bin\windows\ Version: 2023

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

[>] Checking Python 3 installation....OK Version: 3.12.6 Path: C:/Python312/python.exe Jupyter: 5.7.2 Kernels: python3

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

[>] Checking R installation...........OK Version: 4.3.1 Path: C:/PROGRA~1/R/R-43~1.1 LibPaths:

C:/Users/*/AppData/Local/R/win-library/4.3
C:/Program Files/R/R-4.3.1/library knitr: (None) rmarkdown: (None)

The knitr package is not available in this R installation. Install with install.packages("knitr") The rmarkdown package is not available in this R installation. Install with install.packages("rmarkdown")

cderv commented 4 days ago

THanks for the report. Can you format your code part correctly please ?

See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us

thank you!

cscheid commented 4 days ago

I'm fairly sure we have a duplicate of this in our repos - the issue is that if two separate javascript libraries want to override require() (which old, badly designed JS libraries do), then they step over each other's toes. Unfortunately there isn't much we can do about it.

quarto-dev / quarto-cli