I get the error $(...).modal is not a function even though bootstrap is imported after jQuery how can i fix this (using npm versions)?

Question

I did extensive research before posting this issue and feel I have exhausted the online documentation and Stack Overflow.

My issue:

I'm using the npm versions of bootstrap with the tempus dominus date time picker script and get the error $(...).modal is not a function even though jQuery is imported before bootstrap and then used to actually import bootstrap in the backend like so:

const ipcRenderer = require('electron').ipcRenderer
const jQuery = require('jQuery');
const $ = require('jQuery');
require('popper.js')
const moment = require('moment')
$(document).ready(() => {
    ipcRenderer.send('page-ready');

    moment().format();
    $.getScript("./js/tempusdominus-bootstrap-4.min.js", function() {

      $(function () {
        $('#datetimepicker1').datetimepicker({
          format: 'YYYY-MM-DD HH:mm'
        });
      });

      $(function () {
      $('#datetimepicker2').datetimepicker({
        format: 'YYYY-MM-DD HH:mm'
      });
      });

    })
    require("bootstrap")
});

Things i've tried:

So after some research i discovered it might be because jQuery was imported twice to make another js script work correctly so i fixed this by changing my code to:

const ipcRenderer = require('electron').ipcRenderer
const jQuery = require('jQuery');
const $ = jQuery.noConflict();
require('popper.js')
const moment = require('moment')
$(document).ready(() => {
    ipcRenderer.send('page-ready');

    moment().format();
    $.getScript("./js/tempusdominus-bootstrap-4.min.js", function() {

      $(function () {
        $('#datetimepicker1').datetimepicker({
          format: 'YYYY-MM-DD HH:mm'
        });
      });

      $(function () {
      $('#datetimepicker2').datetimepicker({
        format: 'YYYY-MM-DD HH:mm'
      });
      });

    })
    require("bootstrap")
});

The code where the modal is called:

ipcRenderer.on("edit-self-result", (event, arg) => {
  if (arg == false) {
    $('#editMemberModal').modal('toggle');
    document.getElementById("userTypeEdit").value = usertype
    document.getElementById("usernameEdit").value = username
    document.getElementById("emailEdit").value = email
  }
})

Answer 1

我应该你试试这个。

$("..")[0].modal

Answer 2

After multiple hours of pulling my hair out, I managed to get a working solution I don't know why this fixes it but if anyone wants to alter this answer to explain why this works go ahead.

But I changed my code from this:

const jQuery = require('jQuery');
const $ = jQuery.noConflict();

To this:

global.jQuery = require('jquery');
global.$ = jQuery.noConflict();