我得到这个“Uncaught TypeError: $(...).daterangepicker is not a function”

Question

我在我的 VUEJS 应用程序中尝试使用 daterangepicker 时遇到问题，我已经使用 NPM 安装了 momnet、jquery、jquery-ui 和 daterangepicker 库，但我仍然收到错误。 这是 main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// import FontAwesomeIcon
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

// import EasyDataTable
import Vue3EasyDataTable from 'vue3-easy-data-table';
import 'vue3-easy-data-table/dist/style.css';

import './assets/main.css';

const app = createApp(App);

app.component('font-awesome-icon', FontAwesomeIcon);
app.component('EasyDataTable', Vue3EasyDataTable);
app.use(store);
app.use(router);

app.mount('#app');

这是我的代码的一部分：

<template>
  <div class="panel px-2 align-content-center">
    <div class="col px-auto">
      <div class="col-12 row align-items-center">
        <div class="btn col-1" id="reportrange" type="button">
          <img src="@/assets/svg/calendar.svg" />
          <span></span>
        </div>
      </div>

      
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import moment from "moment";
import $ from "jquery";

$(document).ready(function () {
  let start = moment().subtract(29, "days");
  let end = moment();
  console.log('START::', start);
  console.log('END::', end);

  function cb(start, end) {
    $("#reportrange span").html(
      start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY")
    );
  }
  $("#reportrange").daterangepicker( => //this line get me an error
    {
      startDate: start,
      endDate: end,
      ranges: {
        Today: [moment(), moment()],
        Yesterday: [moment().subtract(1, "days"), moment().subtract(1, "days")],
        "Last 7 Days": [moment().subtract(6, "days"), moment()],
        "Last 30 Days": [moment().subtract(29, "days"), moment()],
        "This Month": [moment().startOf("month"), moment().endOf("month")],
        "Last Month": [
          moment().subtract(1, "month").startOf("month"),
          moment().subtract(1, "month").endOf("month"),
        ],
      },
    },
    cb
  );

  cb(start, end);
});
</script>

我得到的错误如下：

Uncaught TypeError: $(...).daterangepicker is not a function

我按照他们的文档daterangepicker中的说明进行操作，并且以同样的方式我得到了同样的错误，因此我使用 NPM 安装了依赖项

有谁知道我的错误是什么或者我该如何解决？

我安装依赖，插入脚本代码，结果是一样的