Rails 6 Javscript not loading until page refresh

Question

The problem I'm having is that a form page requires a refresh before javascript takes effect I'm not including the .js file that fails to load or the form because I think the problem is in application.js shown below Am I using a mix of old and new syntax?

require("jquery")
require("js.cookie")
require("bootstrap")
require("channels")
require.context('../images', true)
require.context('../stylesheets', true)
require.context('../stylesheets/fonts', true)
require("trix")
require("@rails/actiontext")
//import Rails from "@rails/ujs"
import "channels"
import "bootstrap"
import "../stylesheets/application"

import "controllers"

import flatpickr from "flatpickr"
import datepickr from "flatpickr"
import timepickr from "flatpickr"
require("flatpickr/dist/flatpickr.css")
import "blueimp-gallery"
document.addEventListener("turbolinks:load", () => {
  flatpickr("[data-behavior='flatpickr']", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
  })
})

import JQuery from 'jquery';
window.jQuery = $;
window.$ = $;

document.addEventListener("turbolinks:load", () => {
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
})
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
Rails.start()
Turbolinks.start()
ActiveStorage.start()

//require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.css/ );
//require.context('file-loader?name=[path][name].[ext]&context=node_modules/jquery-ui-dist!jquery-ui-dist', true,    /jquery-ui\.theme\.css/ );