reactable
reactable copied to clipboard
glin
Reactable showing on RStudio but not on Chrome/Safari
Hi there,
I have a table I'm rendering using Shiny and flexdashboard. The table renders allright in the RStudio preview but it is not on Google Chrome (nor Safari) for reasons I cannot discern.
Using a flexdashboard framework, I have an Rmarkdown file with essentially the following chunk:
renderReactable({
mtcars |>
reactable()
})
which is as minimal as it gets. This table will show up in the RStudio Viewer, but it won't show up at all on Chrome. It also doesn't show up in my company's Posit Connect.
Any hints towards why this may be the case would be very appreciated.
Ok... I tested Firefox, Brave, Chrome and Chromium. Only the later renders reactables.
I suspect the primary culprit may be flexdashboard, as I am capable of making reactable and Shiny render on Chrome when used directly, but not when using flexdashboard (or Quarto Dashboards) for that matter. It may be an issue with Bootstrap.
It's most likely a JavaScript error that causes the table to go blank, so could you open your browser's developer tools pane, and check if there are any JavaScript errors in red?
I tested this briefly with the latest Chrome on Windows and couldn't reproduce any error. The JS error would help a lot in identifying what sort of conflict this is though.
@glin - running into this as well
running this in RStudio on my laptop works, but fails on a kubernetes RStudio instance on Chrome
reactable(
iris[1:5, ],
defaultColDef = colDef(
cell = function(value) format(value, nsmall = 1)
)
)
and developer tools shows
react-dom.min.js:79 Uncaught TypeError: Cannot read properties of undefined (reading 'hydrate')
at e.map.t.Cell (reactable.js:1:126764)
at reactable.js:1:154145
at Array.map (<anonymous>)
at reactable.js:1:153708
at Array.map (<anonymous>)
at reactable.js:1:152246
at Ol (reactable.js:1:156692)
at of (react-dom.min.js:109:301)
at Rk (react-dom.min.js:250:214)
at Si (react-dom.min.js:195:185)
it also doesn't fail if I comment the cell = function(value)... line
Any ideas?
Using reactR_0.6.0, reactable_0.4.4, htmlwidgets_1.6.4
R version 4.4.0 (2024-04-24)
Platform: x86_64-pc-linux-gnu
Running under: Ubuntu 22.04.4 LTS
Matrix products: default
BLAS: /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.10.0
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.10.0
locale:
[1] LC_CTYPE=en_US.UTF-8 LC_NUMERIC=C LC_TIME=en_US.UTF-8 LC_COLLATE=en_US.UTF-8 LC_MONETARY=en_US.UTF-8 LC_MESSAGES=en_US.UTF-8
[7] LC_PAPER=en_US.UTF-8 LC_NAME=C LC_ADDRESS=C LC_TELEPHONE=C LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C
time zone: Etc/UTC
tzcode source: system (glibc)
attached base packages:
[1] stats graphics grDevices utils datasets methods base
other attached packages:
[1] misPricing_0.1.0 sparkline_2.0 flextable_0.9.6 reactable_0.4.4 future_1.33.2 promises_1.3.0
[8] shinyjs_2.1.0 shinydashboard_0.7.2 shinycssloaders_1.0.0 thematic_0.1.5 lubridate_1.9.3 forcats_1.0.0
[15] stringr_1.5.1 dplyr_1.1.4 purrr_1.0.2 readr_2.1.5 tidyr_1.3.1 tibble_3.2.1 ggplot2_3.5.1
[22] tidyverse_2.0.0 bsicons_0.1.2 shiny_1.8.1.1 bslib_0.7.0
loaded via a namespace (and not attached):
[1] rstudioapi_0.16.0 jsonlite_1.8.8 magrittr_2.0.3 farver_2.1.2 rmarkdown_2.27 fs_1.6.4 ragg_1.3.2
[8] vctrs_0.6.5 memoise_2.0.1 askpass_1.2.0 htmltools_0.5.8.1 usethis_2.2.3 progress_1.2.3 lambda.r_1.2.4
[15] curl_5.2.1 sass_0.4.9 parallelly_1.37.1 fontawesome_0.5.2 htmlwidgets_1.6.4 desc_1.4.3 testthat_3.2.1.1
[22] plotly_4.10.4 futile.options_1.0.1 cachem_1.1.0 uuid_1.2-0 mime_0.12 lifecycle_1.0.4 pkgconfig_2.0.3
[29] R6_2.5.1 fastmap_1.2.0 digest_0.6.35 colorspace_2.1-0 rprojroot_2.0.4 pkgload_1.4.0 crosstalk_1.2.1
[36] textshaping_0.3.7 reactR_0.6.0 labeling_0.4.3 fansi_1.0.6 timechange_0.3.0 httr_1.4.7 compiler_4.4.0
[43] remotes_2.5.0 bit64_4.0.5 fontquiver_0.2.1 withr_3.0.0 backports_1.4.1 DBI_1.2.2 pkgbuild_1.4.4
[50] Rttf2pt1_1.3.12 openssl_2.2.0 sessioninfo_1.2.2 gfonts_0.2.0 tools_4.4.0 zip_2.3.1 httpuv_1.6.15
[57] extrafontdb_1.0 glue_1.7.0 grid_4.4.0 checkmate_2.3.1 RPresto_1.4.6 generics_0.1.3 gtable_0.3.5
[64] tzdb_0.4.0 data.table_1.15.4 hms_1.1.3 xml2_1.3.6 utf8_1.2.4 pillar_1.9.0 later_1.3.2
[71] lattice_0.22-6 bit_4.0.5 tidyselect_1.2.1 fontLiberation_0.1.0 miniUI_0.1.1.1 knitr_1.46 fontBitstreamVera_0.1.1
[78] crul_1.4.2 futile.logger_1.4.3 xfun_0.44 devtools_2.4.5 brio_1.1.5 stringi_1.8.4 lazyeval_0.2.2
[85] yaml_2.3.8 evaluate_0.23 codetools_0.2-20 httpcode_0.3.0 officer_0.6.6 extrafont_0.19 gdtools_0.3.7
[92] settings_0.2.7 cli_3.6.2 xtable_1.8-4 systemfonts_1.1.0 munsell_0.5.1 jquerylib_0.1.4 roxygen2_7.3.1
[99] Rcpp_1.0.12 globals_0.16.3 dbplyr_2.5.0 parallel_4.4.0 ellipsis_0.3.2 prettyunits_1.2.0 profvis_0.3.8
[106] urlchecker_1.0.1 listenv_0.9.1 viridisLite_0.4.2 hrbrthemes_0.8.7 scales_1.3.0 crayon_1.5.2 rlang_1.1.3
[113] formatR_1.14
@rcarboni Very strange, it sounds like some of the required JavaScript files aren't loading on the page. Cannot read properties of undefined (reading 'hydrate') typically means the reactR script wasn't loaded at all, as you should typically be able to run reactR.hydrate from the developer tools console.
Can you check your developer tools to see if there are any other types of errors? For example, did a script fail to load on this tab:
Any files highlighted in red would be worth noting.
Thanks @glin
all these guys loaded ok
But looking closer I do see an earlier error on the console that might be relevant?
Refused to execute script from 'https://<my server redacted>/user/rodolfo_carboni/rstudio/p/7459c62d/reactwidget-2.0.0/react-tools.umd.cjs' because its MIME type ('application/octet-stream') is not executable, and strict MIME type checking is enabled.
I am having a similar problem: table shows fine in Rstudio, but not showing on chrome/safari/Firefox when running the code with docker.
sessionInfo
sessionInfo()
R version 4.4.1 (2024-06-14)
Platform: x86_64-pc-linux-gnu
Running under: Ubuntu 22.04.4 LTS
Matrix products: default
BLAS: /usr/lib/x86_64-linux-gnu/openblas-pthread/libblas.so.3
LAPACK: /usr/lib/x86_64-linux-gnu/openblas-pthread/libopenblasp-r0.3.20.so; LAPACK version 3.10.0
locale:
[1] LC_CTYPE=en_US.UTF-8 LC_NUMERIC=C
[3] LC_TIME=en_US.UTF-8 LC_COLLATE=en_US.UTF-8
[5] LC_MONETARY=en_US.UTF-8 LC_MESSAGES=en_US.UTF-8
[7] LC_PAPER=en_US.UTF-8 LC_NAME=C
[9] LC_ADDRESS=C LC_TELEPHONE=C
[11] LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C
time zone: Etc/UTC
tzcode source: system (glibc)
attached base packages:
[1] stats graphics grDevices datasets utils methods base
other attached packages:
[1] nmdtxdb_0.1.1 renv_1.0.7
loaded via a namespace (and not attached):
[1] config_0.3.2 tidyr_1.3.1 utf8_1.2.4
[4] generics_0.1.3 stringi_1.8.4 digest_0.6.36
[7] magrittr_2.0.3 grid_4.4.1 attempt_0.3.1
[10] golem_0.4.1 fastmap_1.2.0 jsonlite_1.8.8
[13] ggrepel_0.9.5 promises_1.3.0 BiocManager_1.30.23
[16] httr_1.4.7 purrr_1.0.2 fansi_1.0.6
[19] scales_1.3.0 cli_3.6.3 shiny_1.8.1.1
[22] rlang_1.1.4 munsell_0.5.1 yaml_2.3.8
[25] tools_4.4.1 rintrojs_0.3.4 shiny.semantic_0.5.1
[28] dplyr_1.1.4 colorspace_2.1-0 ggplot2_3.5.1
[31] httpuv_1.6.15 forcats_1.0.0 vctrs_0.6.5
[34] R6_2.5.1 mime_0.12 lifecycle_1.0.4
[37] reactable_0.4.4 stringr_1.5.1 htmlwidgets_1.6.4
[40] shinycssloaders_1.0.0 ggtranscript_0.99.9 pkgconfig_2.0.3
[43] pillar_1.9.0 later_1.3.2 gtable_0.3.5
[46] glue_1.7.0 Rcpp_1.0.12 tibble_3.2.1
[49] tidyselect_1.2.1 xtable_1.8-4 htmltools_0.5.8.1
[52] patchwork_1.2.0 compiler_4.4.1 markdown_1.13
console error
[Error] TypeError: undefined is not an object (evaluating 'tr.hydrate')
(anonymous function) — columns.js:287
(anonymous function) — Reactable.js:772
map
(anonymous function) — Reactable.js:764
map
Ol — Reactable.js:757
of — react-dom.min.js:109:303
Rk — react-dom.min.js:250:217
Si — react-dom.min.js:195:188
Pk — react-dom.min.js:195:119
Nd — react-dom.min.js:194:495
Mi — react-dom.min.js:189:182
Mi
db — react-dom.min.js:79:184
zb — react-dom.min.js:190:159
$k — react-dom.min.js:213:128
Wd — react-dom.min.js:213:319
renderValue — reactR.js:21
renderValue — htmlwidgets.js:885
(anonymous function) — htmlwidgets.js:539
m — outputBinding.ts:29:1362
(anonymous function) — outputBinding.ts:29:4183
e_ — outputBinding.ts:30:104
f — outputBinding.ts:31:213
(anonymous function) — outputBinding.ts:31:370
Promise
(anonymous function) — outputBinding.ts:31:109
(anonymous function) — htmlwidgets.js:112
m — outputAdapter.ts:25:1362
(anonymous function) — outputAdapter.ts:25:4183
VP — outputAdapter.ts:26:104
f — outputAdapter.ts:27:213
(anonymous function) — outputAdapter.ts:27:370
Promise
(anonymous function) — outputAdapter.ts:27:109
m — shinyapp.ts:5:1362
(anonymous function) — shinyapp.ts:5:4183
Oq — shinyapp.ts:6:104
f — shinyapp.ts:7:213
(anonymous function) — shinyapp.ts:7:370
Promise
(anonymous function) — shinyapp.ts:7:109
m — shinyapp.ts:5:1362
(anonymous function) — shinyapp.ts:5:4183
Oq — shinyapp.ts:6:104
f — shinyapp.ts:7:213
(anonymous function) — shinyapp.ts:7:370
Promise
(anonymous function) — shinyapp.ts:7:109
m — shinyapp.ts:5:1362
(anonymous function) — shinyapp.ts:5:4183
Oq — shinyapp.ts:6:104
f — shinyapp.ts:7:213
(anonymous function) — shinyapp.ts:7:370
Promise
(anonymous function) — shinyapp.ts:7:109
m — shinyapp.ts:5:1362
(anonymous function) — shinyapp.ts:5:4183
Oq — shinyapp.ts:6:104
f — shinyapp.ts:7:213
(anonymous function) — shinyapp.ts:7:370
Promise
(anonymous function) — shinyapp.ts:7:109
m — shinyapp.ts:5:1362
(anonymous function) — shinyapp.ts:5:4183
Oq — shinyapp.ts:6:104
f — shinyapp.ts:7:213
(anonymous function) — shinyapp.ts:7:370
Promise
(anonymous function) — shinyapp.ts:7:109
m — shinyapp.ts:5:1362
(anonymous function) — shinyapp.ts:5:4183
Oq — shinyapp.ts:6:104
f — shinyapp.ts:7:213
wf (react-dom.min.js:121:184)
(anonymous function) (react-dom.min.js:121:355)
Fh (react-dom.min.js:92)
Ki (react-dom.min.js:180:350)
Ii (react-dom.min.js:179:281)
Ik (react-dom.min.js:178:332)
Sk (react-dom.min.js:197:315)
yb (react-dom.min.js:196:169)
Mi (react-dom.min.js:189:376)
Mi
db (react-dom.min.js:79:184)
zb (react-dom.min.js:190:159)
$k (react-dom.min.js:213:128)
Wd (react-dom.min.js:213:319)
renderValue (reactable.js:1:158210)
renderValue (htmlwidgets.js:885)
(anonymous function) (htmlwidgets.js:539)
m (shiny.min.js:2:157946)
(anonymous function) (shiny.min.js:2:159266)
e_ (shiny.min.js:2:163912)
f (shiny.min.js:2:164112)
(anonymous function) (shiny.min.js:2:164172)
Promise
(anonymous function) (shiny.min.js:2:164062)
(anonymous function) (htmlwidgets.js:112)
m (shiny.min.js:2:271680)
(anonymous function) (shiny.min.js:2:273000)
VP (shiny.min.js:2:277646)
f (shiny.min.js:2:277846)
(anonymous function) (shiny.min.js:2:277906)
Promise
(anonymous function) (shiny.min.js:2:277796)
m (shiny.min.js:2:377444)
(anonymous function) (shiny.min.js:2:378764)
Oq (shiny.min.js:2:383410)
f (shiny.min.js:2:383610)
(anonymous function) (shiny.min.js:2:383670)
Promise
(anonymous function) (shiny.min.js:2:383560)
m (shiny.min.js:2:377444)
(anonymous function) (shiny.min.js:2:378764)
Oq (shiny.min.js:2:383410)
f (shiny.min.js:2:383610)
(anonymous function) (shiny.min.js:2:383670)
Promise
(anonymous function) (shiny.min.js:2:383560)
m (shiny.min.js:2:377444)
(anonymous function) (shiny.min.js:2:378764)
Oq (shiny.min.js:2:383410)
f (shiny.min.js:2:383610)
(anonymous function) (shiny.min.js:2:383670)
Promise
(anonymous function) (shiny.min.js:2:383560)
m (shiny.min.js:2:377444)
(anonymous function) (shiny.min.js:2:378764)
Oq (shiny.min.js:2:383410)
f (shiny.min.js:2:383610)
(anonymous function) (shiny.min.js:2:383670)
Promise
(anonymous function) (shiny.min.js:2:383560)
m (shiny.min.js:2:377444)
(anonymous function) (shiny.min.js:2:378764)
Oq (shiny.min.js:2:383410)
f (shiny.min.js:2:383610)
(anonymous function) (shiny.min.js:2:383670)
Promise
(anonymous function) (shiny.min.js:2:383560)
m (shiny.min.js:2:377444)
(anonymous function) (shiny.min.js:2:378764)
Oq (shiny.min.js:2:383410)
f (shiny.min.js:2:383610)
Downgrading to [email protected] and [email protected] resolved the issue for me. Just give more detail. While running the app locally via rstudio Viewer, Firefox or safari, I perceived no problems. I.e., the table renders as usual. While deploying (I use shiny-proxy), the table would not render. So I tried the following:
- [x] First, downgrade htmlwidgets to 1.6.2
- [x] Second, downgrade reactR to 0.4.4
With both, I got back to the expected behavior - the table renders.
PS: shinyproxy uses iframes.
I will just tack on and mention that I am experiencing the same issue, except weirdly this seems to be confined when I expand rows on nested reactables:
Reproduced this bug in microsoft edge, and chrome, on local rstudio server. R version 4.4.0, reactable version 0.4.4 and also on dev
data <- unique(CO2[, c("Plant", "Type")])
reactable(data, details = function(index) {
plant_data <- CO2[CO2$Plant == data$Plant[index], ]
htmltools::div(style = "padding: 1rem",
reactable(plant_data, outlined = TRUE)
)
})
Initially renders fine:
But when clicking on expanded rows, table "disappears"
dev tools console similar errors mentioned in previous comments:
I can confirm that downgrading these packages to these versions fixed this bug for me as well. Thanks for posting solution @tbrittoborges
Downgrading to [email protected] and [email protected] resolved the issue for me. Just give more detail. While running the app locally via rstudio Viewer, Firefox or safari, I perceived no problems. I.e., the table renders as usual. While deploying (I use shiny-proxy), the table would not render. So I tried the following:
- [x] First, downgrade htmlwidgets to 1.6.2
- [x] Second, downgrade reactR to 0.4.4
With both downgrade, I got back to the expected behavior - the table renders.
PS: shinyproxy uses iframes.
I am also having this error in a Shinyproxy + Docker Setup. When I run the app locally the tables are showing up, but not in the production environment.. I am not using iframes with shinyproxy, since its only 1 Shiny app so it lands directly there (landing-page: /app_direct/app)
I am not using flexdashboard, just a regular fluidPage with Bootstrap bslib::bs_theme_dependencies(theme = bslib::bs_theme(4)),
Console Errors:
Refused to execute script from '.../app_direct/app/reactwidget-2.0.0/react-tools.umd.cjs' because its MIME type ('application/octet-stream') is not executable, and strict MIME type checking is enabled.
Cannot read properties of undefined (reading 'hydrate')
I can also confirm that downgrading works🎉:
RUN R -e "remotes::install_version('htmlwidgets', version = '1.6.2', dependencies = FALSE, upgrade = 'never')"
RUN R -e "remotes::install_version('reactR', version = '0.4.4', dependencies = FALSE, upgrade = 'never')"
Thanks all for the info, I can also confirm that it's an issue with reactR 0.6.0 specifically. Downgrading to reactR 0.5.0 fixed the issue for me. htmlwidgets should be totally unrelated to this, so you can try re-upgrading that to the latest.
There's an upstream issue already posted: https://github.com/react-R/reactR/issues/86
I'll comment there with some more notes
Should be fixed now with the latest release of reactR on CRAN! Update reactR to 0.6.1 and see if that fixes things.
I'm leaving the issue open though because we still don't know if the original issue was related to this at all.
Should be fixed now with the latest release of
reactRon CRAN! UpdatereactRto 0.6.1 and see if that fixes things.I'm leaving the issue open though because we still don't know if the original issue was related to this at all.
I had a similar issue where the app works fine on Desktop, but failed to load reactable on the shinyapps.iso. The update to ReactR to 0.6.1 fixed my issue. I don't see the following errors anymore when we inspect the browser
Refused to execute script from '.../app_direct/app/reactwidget-2.0.0/react-tools.umd.cjs' because its MIME type ('application/octet-stream') is not executable, and strict MIME type checking is enabled.
Cannot read properties of undefined (reading 'hydrate')
