shiny doesn't work after, containing javascript

Question

I have a problem with this application, containing a javascript file for the user-interface part, which enables more tabs. However, the server part doesn't work when we have included the javascript file. I have a simple reactivity regarding the mtcars dataset here to showcase the problem. when I disable the "includeScript("script.js")", by merely put the # in front of it, the app works, so the problem is connected to this part. So my question would be, How can I fix this issue and also keep the javascript part in the shiny app.

Grateful for all your help.

Edit: Now I have replaced includeScript("script.js") with tags$head(tags$script(src="./script.js")), and it appears to work, but with an extremely slow reactivity, I have to wait almost 1-2 min before seeing something. Any suggestion, or do you also experience this ?

library(shiny)
library(shinythemes)
library(shinymanager)
library(dplyr)

script.js

$(document).ready(function(){
  $('.dropdown').on('click', function(e){
    $(this).toggleClass('open');

    e.stopPropagation();
    e.preventDefault();
  });

  $('[data-toggle=tab]').on('click', function(e){
    let dv = ($(this).attr('data-value'));

    //Set active element in tabcontents
    $('.tab-pane').removeClass('active');
    $('.tab-pane[data-value="' + dv + '"]').addClass('active');

    //Set active element in navbar
    $('a[data-toggle=tab]').parent().removeClass('active');
    $('a[data-value="' + dv + '"]').parent().addClass("active");

    //Close the dropdowns
    $('.dropdown').removeClass('open');

    e.stopPropagation();
    e.preventDefault();
  });
});

Credentials

credentials <- data.frame(
  user = c("Jhon", "Erik"), # mandatory
  password = c("1", "1"), # mandatory
  start = c("2022-02-14"), # optinal (all others)
  expire = c(NA, "2022-12-31"),
  admin = c(TRUE, TRUE),
  comment = "Model Performance application",
  stringsAsFactors = FALSE
)

Ui

ui <- fluidPage(
  includeScript("script.js"),
  navbarPage("Shiny",
             collapsible = TRUE,
             theme       = shinytheme('yeti'),
             tabPanel("Information" ,icon = icon("info"),
                      
                      tags$h2("Information about the current user"),
                      verbatimTextOutput("auth_output")
                      
                      
                      
             ),
             tabPanel("Simulation 1",
                      tags$h2("Simulation"),
                      tags$hr(),
                      selectInput("vars", "Variables", names(mtcars), multiple = T),
                      tableOutput("data")
                      
                      
             ),
             tabPanel("Upload",icon = icon("upload"),
                      tags$h2("Upload datasets"),
                      tags$hr(),
             ),
             tabPanel("Simulation 2",
                      tags$h2("Simulation"),
                      tags$hr()
             ),
             
             navbarMenu("Statistical outputs",
                        tabPanel("One"
                        ),
                        tabPanel("Two"
                        ),
                        tabPanel("Three"
                        ),
                        tabPanel("Four"
                        ),
                        tabPanel("Report"
                                 
                        ),
                        navbarMenu("More",
                                   tabPanel("Statistical", icon = icon("info")
                                   ),
                                   
                                   tabPanel("Info",
                                            icon = icon("info-circle")
                                            
                                            
                                   ),
                                   tabPanel("Subpart 4", "Subpart 4"),
                                   tabPanel("Subpart 5", "Subpart 5")
                                   
                                   
                        )
             )
  )
)

Wrap your UI with secure_app

ui <- secure_app(ui)

Server

server <- function(input, output, session) {
  # call the server part
  # check_credentials returns a function to authenticate users
  res_auth <- secure_server(
    check_credentials = check_credentials(credentials)
  )
  
  output$auth_output <- renderPrint({
    reactiveValuesToList(res_auth)
  })
  
  output$data <-renderTable({
    req(input$vars)
    mtcars %>% select(all_of(input$vars))
  })
  
}


shiny::shinyApp(ui, server)

Answer 1

Update:

Most important in addition to 1. and 2. from the first answer. The app works as desired only if split in ui and server part!

It seems that the server part is not working but after clicking on Statistical outputs the table appears!

First answer:

1. Put your script.js into a www folder. This should be in the same folder where your app is.
2. Change includeScript("script.js"), in ui part with tags$head(tags$script(src="script.js")),