Strange problem while importing jquery to js file

Question

I have a file written in vanilla js. When I import jquery using: import $ as "jquery" all code stops working. Of course, I put this at the beginning of the code, the import line. when I click on the item with the class name ".search" nothing happens. When I delete: import $ from "jquery" everything is back to normal. The search overlay opens.

import $ from "jquery"

class Search {
    constructor() {
        this.resultsDiv = document.querySelector("#results")
        this.openButtons = document.querySelectorAll(".search");
        this.closeButton = document.querySelector(".search-close");
        this.searchOverlay = document.querySelector(".search-overlay");
        this.searchField = document.querySelector("#search-input");
        this.previousValue;
        this.typingTimer;
        this.isOverlayOpen = false;
        this.isSpinnerVisible = false;
        this.events();
    }

    // 2. events
    events() {
        this.openButtons.forEach((button) =>
            button.addEventListener("click", this.openOverlay.bind(this))
        );
        this.closeButton.addEventListener("click", this.closeOverlay.bind(this));
        document.addEventListener("keydown", this.keyPressDispatcher.bind(this));
        this.searchField.addEventListener("keyup", this.typingLogic.bind(this));
    }

    // 3. methods (function, actions...)
    typingLogic() {
        if (this.searchField.value != this.previousValue) {
            clearTimeout(this.typingTimer);

            if (this.searchField.value) {
                if (!this.isSpinnerVisible) {
                    this.resultsDiv.innerHTML = '<div class="spinner-loader"></div>';
                    this.isSpinnerVisible = true;
                }
                this.typingTimer = setTimeout(this.getReults.bind(this), 2000);
            } else {
                this.resultsDiv.innerHTML = '';
                this.isSpinnerVisible = false;
            }
        }
        this.previousValue = this.searchField.value;
    }

    getResults() {
        $.getJSON("/wp-json/wp/v2/posts?search=" + this.searchField.val(), function (posts) {
            alert(posts[0].title.rendered)
        })
    }

    keyPressDispatcher(e) {
        if (e.keyCode == 83 && !this.isOverlayOpen && !document.querySelectorAll("input, textarea").activeElement) {
            this.openOverlay();
        }

        if (e.keyCode == 27 && this.isOverlayOpen) {
            this.closeOverlay();
        }
    }

    openOverlay() {
        this.searchOverlay.classList.add("search-overlay--active");
        document.querySelector("body").classList.add("body-no-scroll");
        this.isOverlayOpen = true;
    }

    closeOverlay() {
        this.searchOverlay.classList.remove("search-overlay--active");
        document.querySelector("body").classList.remove("body-no-scroll");
        this.isOverlayOpen = false;
    }
}

const search = new Search();

I don't know what is causing the problem.