Я получаю ошибку $ (...). Модал не является функцией, даже если bootstrap импортируется после jQuery, как я могу это исправить (используя npm версии)? - PullRequest
0 голосов
/ 13 февраля 2020

Я провел обширное исследование, прежде чем опубликовать эту проблему, и чувствую, что исчерпал онлайн-документацию и переполнение стека.

Моя проблема:

Я использую npm версии bootstrap с помощью сценария выбора времени и времени tempus dominus и получения ошибки $ (...). modal не является функцией, даже если jQuery импортируется до bootstrap, а затем используется для фактического импорта bootstrap в бэкэнд, например, так :

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")
});

Вещи, которые я пробовал:

Итак, после некоторых исследований я обнаружил, что это может быть связано с тем, что jQuery был импортирован дважды, чтобы заставить другой скрипт js работать правильно, поэтому я исправил изменив мой код на:

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")
});

Код, где называется модал:

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
  }
})

Ответы [ 2 ]

0 голосов
/ 13 февраля 2020

После нескольких часов вырывания волос мне удалось найти рабочее решение, я не знаю, почему это исправляет его, но если кто-то хочет изменить этот ответ, чтобы объяснить, почему это работает go впереди.

Но я изменил свой код с этого:

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

На это:

global.jQuery = require('jquery');
global.$ = jQuery.noConflict();
0 голосов
/ 13 февраля 2020

Я Если вы попробуете это.

$("..")[0].modal
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...