R Shinydashboard fails to load in a Shiny module

Question

I want to put a shiny dashboard page into a module (say, for putting a dashboard page into a modalDialogue). But as long as the dashboardPage is in a module, its html dependencies do not load normally. A minimal example:

library(shinydashboard)

ui <- fluidPage(
  uiOutput(outputId = "modui")
)

server <- function(input, output, session) {
  callModule(mod, "mod")
  output$modui <- renderUI(modUI("mod"))
}

modUI <- function(id) {
  ns <- NS(id)
  dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
      sidebarMenu(
        id = ns("sidebarmenu"),
        menuItem("Menu item1", tabName="m1"),
        menuItem("Menu item2", tabName="m2")
      )
    ),
    dashboardBody()
  )
}

mod <- function(input, output, session) {
  observeEvent(input$sidebarmenu, {
    print(input$sidebarmenu)
  })
}

shinyApp(ui, server)

When I run the app, Chrome gives me the following errors:

DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:5574/app.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:5574/shinydashboard.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

As a result, sidebarMenu is no longer a reactive input. The errors are gone when dashboardPage() is included in the main session's UI (but this also causes the whole main page to be a dashboard).

I tried to write htmlDependency object:

dashboard_dep <- htmlDependency(
  name = "shinydashboard",
  version = "0.7.1",
  package = "shinydashboard",
  src = "",
  script = c("shinydashboard.min.js", "shinydashboard.min.js.map",
             "AdminLTE/app.min.js", "AdminLTE/app.min.js.map"),
  stylesheet = c("shinydashboard.css",
                 "AdminLTE/_all-skins.min.css", "AdminLTE/AdminLTE.min.css"),
  all_files = TRUE
)

But this does not seem to apply to .map files. Any thoughts to overcome this issue?

Answer 1

Answer my own question:

I read about shiny input bindings and the Javascript codes in shinydashboard. The Javascript code processes the DOM elements after the HTML objects are loaded, but at the time my page is loaded, the dashboard DOM elements aren't there (only my button is present). In other words, I need to put the dashboard page in the UI so that it is loaded at start.

My goal is to put the page into a modal, and I finally settled to use ShinyBS modal (the modalDialogue provided in Shiny is somewhat awkward to use when put in the UI directly).