Using the box css class with an element ID causes errors in the javascript console

[Mosk915]

I'm using version 2.0.1 of shinydashboardPlus and if I use the box class on an element with an id, it results in errors in the javascript console. If the element doesn't have an id, the errors go away.

Reproducible example:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(title = "Reprex",
                    header = dashboardHeader(),
                    sidebar = dashboardSidebar(),
                    body = dashboardBody(
                      tags$div(class = "box", id = "test")
                    )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

Errors:
rstudio/:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse ()
at exports.InputBinding.getValue (shinydashboardPlus.min.js:1)
at a (shiny.min.js:3)
at r (shiny.min.js:3)
at initShiny (shiny.min.js:3)

init_shiny.js:420 Uncaught TypeError: Cannot read property 'normalCall' of undefined
at v (shiny.min.js:3)

init_shiny.js:487 Uncaught TypeError: Cannot read property 'normalCall' of undefined
at I (shiny.min.js:3)

[Mosk915]

Will this be fixed any time soon? This is more of a bug than an enhancement.

[DivadNojnarg]

Hi

box is a reserved class from shinydashboard (Plus) and adminLTE2. I don't see any solution except not using it as a class. This the same thing as using a reserved class from bootstrap like badge. Just to give you an example, below the element will have a grey border because it is seen as a badge by Bootstrap CSS:

library(shiny)

ui <- fluidPage(
  theme = bslib::bs_theme(5),
  div(class = "badge bg-secondary", "Plop")
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

Why would you need the box class? Can't you use the box function instead or another custom class?

[Mosk915]

I'm building my own box function so that I can have more control over it. But I wanted to still make use of the css on the box class. I ran your example, but that doesn't produce the same error in the javascript console that I'm seeing in my example. Even if I load the shinydashboardPlus package and add an id to the div, the error still doesn't occur in your example.

In my example, if I don't load the shinydashboardPlus package and just load the shinydashboard package, the error doesn't occur. So there doesn't seem to be any conflict with adminLTE2. Only when the shinydashboardPlus package is loaded and the div has an id, does the error occur, which is why I thought the issue may have something to do with this package.

I'm including the errors I'm getting in the javascript console again since it's slightly different from when I first opened the issue.

Uncaught SyntaxError: "undefined" is not valid JSON
at JSON.parse ()
at e.getValue (cards.js:121:19)
at m (bind.ts:45:24)
at u (bind.ts:84:18)
at hq (bind.ts:91:5)
at xu (bind.ts:211:10)
at Qv (init.ts:132:33)
at index.ts:56:7

init.ts:335 Uncaught TypeError: Cannot read properties of undefined (reading 'normalCall')
at H (init.ts:335:36)

I understand if there's no way to fix this, I just thought it was odd that it was occurring in the first place.