glin / reactable

Interactive data tables for R
https://glin.github.io/reactable
Other
612 stars 79 forks source link

Reactable showing on RStudio but not on Chrome/Safari #363

Open Lornebradia opened 3 months ago

Lornebradia commented 3 months ago

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.

on RStudio Viewer on Google Chrome
igutermes commented 3 months ago

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

igutermes commented 3 months ago

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

Lornebradia commented 3 months ago

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 commented 3 months ago

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 commented 2 days ago

@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 commented 2 days ago

@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: dev tools JS scripts

Any files highlighted in red would be worth noting.

rcarboni commented 2 days ago

Thanks @glin

all these guys loaded ok image

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.

image