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

[ElmarGeersHy]

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:/PROGRA1/R/R-431.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]

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]

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.