Reactable showing on RStudio but not on Chrome/Safari

[Lornebradia]

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.

[igutermes]

Mine shows a blank screen too... Can't understand why

[igutermes]

Ok... I tested Firefox, Brave, Chrome and Chromium. Only the later renders reactables.

[Lornebradia]

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.

[glin]

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.

[rcarboni]

@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           

[glin]

@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.

[rcarboni]

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.

[tbrittoborges]

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)

[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:

• First, downgrade htmlwidgets to 1.6.2
• Second, downgrade reactR to 0.4.4

With both, I got back to the expected behavior - the table renders.

PS: shinyproxy uses iframes.

[wvictor14]

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:

[wvictor14]

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:

• First, downgrade htmlwidgets to 1.6.2
• Second, downgrade reactR to 0.4.4

With both downgrade, I got back to the expected behavior - the table renders.

PS: shinyproxy uses iframes.

[trafficonese]

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')"

[glin]

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: react-R/reactR#86

I'll comment there with some more notes