Nuxt 3 importing 'datatables.net-bs5' invoke error $.extend is not a function

MeowwwwW

Error messages shown:

500
$.extend is not a function

at /Git/crypto-portfolio-nuxt/node_modules/.pnpm/datatables.net@2.3.2/node_modules/datatables.net/js/dataTables.mjs:732:3)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async ViteNodeRunner.runModule (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:397:4)
at async ViteNodeRunner.directRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:375:3)
at async ViteNodeRunner.cachedRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:189:11)
at async ViteNodeRunner.dependencyRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:239:10)
at async /Git/crypto-portfolio-nuxt/node_modules/.pnpm/datatables.net-bs5@2.3.2/node_modules/datatables.net-bs5/js/dataTables.bootstrap5.mjs:2:128)
at async ViteNodeRunner.runModule (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:397:4)
at async ViteNodeRunner.directRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:375:3)
at async ViteNodeRunner.cachedRequest (D:/Git/crypto-portfolio-nuxt/node_modules/.pnpm/vite-node@3.2.4_jiti@2.4.2/node_modules/vite-node/dist/client.mjs:189:11)

Description of problem:
Sorry if this issue is fixed as I try to search the keyword nuxt 3 or $.extend is not a function I couldn't find any similar problem for nuxt 3. I am new and trying to install dataTable with bootstrap 5 to my nuxt 3 project where I follow the guide provided at https://datatables.net/manual/vue
For installation, I used
- pnpm add datatables.net-vue3 datatables.net-bs5

However when I try to import from 'datatables.net-bs5' it will display the 500 error showing $.extend is not a function as shown below. Hopefully anyone can help out on how to resolving this issue?

My component code is just as below

DataTable.vue

<template>

</template>

<script setup lang="ts">
import DataTable from 'datatables.net-vue3'
import DataTablesCore from 'datatables.net-bs5'

DataTable.use(DataTablesCore);
</script>

<style scoped>
@import url('datatables.net-bs5');
</style>

allan

The error suggests that DataTables can't see jQuery, which it is using for DOM manipulation and events. I'm not immediately sure why that would be. Can you link to StackBlitz example showing the issue so I can take a look into it please?

Here is one which uses DataTables with Vue3.

Allan