rstudio/bslib

Using a `bslib::value_box()` breaks Quarto dashboards

gadenbuie opened this issue · 3 comments

gadenbuie commented

This example from quarto-dev/quarto-cli#9454

---
format: dashboard
---

# Page 1

## {.sidebar}

This sidebar is not toggleable anymore

## Main body

### Value box

```{r}
bslib::value_box(
  'Adelie penguins',
  theme = "danger",
  value = 23432,
  full_screen = FALSE ## This is nevertheless possible in the dashboard 
)
```

breaks because this causes the bslib components js to be loaded, which attempts to register bslib's CustomElements that have already been registered by Quarto

localhost/:1 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "bslib-tooltip" has already been used with this registry
    at http://localhost:6054/issue-9454_files/libs/bslib-component-js-0.7.0/web-components.min.js:217:46
    at Array.forEach (<anonymous>)
    at http://localhost:6054/issue-9454_files/libs/bslib-component-js-0.7.0/web-components.min.js:217:19
    at http://localhost:6054/issue-9454_files/libs/bslib-component-js-0.7.0/web-components.min.js:217:183

I suspect the issue isn't just about bslib-tooltip, but also anything else where we've used a web component or custom element.

We probably need better coordination with Quarto on this one, but I think in the mean time we probably should avoid registering existing components.

gadenbuie commented

Okay, it's not just duplicate component registry, we also assume jQuery is available in sidebar.ts.

gadenbuie commented

Okay, it's not just duplicate component registry, we also assume jQuery is available in sidebar.ts.

It turns out this is okay, beyond adding some noise in the console. The errors from trying to call $() occur in event handlers and don't break functionality. The biggest issue is re-registering bslib components when they already exist on the page, that should be fixed by #1045.

github-actions commented

This issue has been automatically locked. If you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.
🙋 Need help? Connect with us on Discord or Posit Community.