vue3 editor @datatables__net_editor-bs5.js Cannot read properties of undefined (reading 'Modal')

casuist

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

<script setup>
import { ref, onMounted } from 'vue';

import DataTable from 'datatables.net-vue3';
// import DataTablesCore from 'datatables.net';
import DataTablesCore from 'datatables.net-bs5';
import Editor from '@datatables.net/editor-bs5';
import DateTime from 'datatables.net-datetime';
import jszip from 'jszip';
import pdfmake from 'pdfmake';
// import jQuery from 'jquery';

import 'datatables.net-buttons-bs5';
// import 'datatables.net-buttons/js/buttons.colVis.mjs';
// import 'datatables.net-buttons/js/buttons.html5.mjs';
// import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-fixedcolumns-bs5';
import 'datatables.net-responsive-bs5';
import 'datatables.net-searchbuilder-bs5';
import 'datatables.net-searchpanes-bs5';
import 'datatables.net-select-bs5';
import 'datatables.net-staterestore-bs5';

DataTable.use(DataTablesCore);
// DataTable.use(Select);

let dt;
const table = ref(); // This variable is used in the `ref` attribute for the component

onMounted(function () {
  dt = table.value.dt;
});

const ajax = {
  url: 'https://api.dev.casinobox.net/api/datatable/users',
  type: 'POST',
};

const dtUserEditor = new Editor({
  ajax: ajax,
  table: '#tableAgent',
  fields: [
    {
      label: 'Name:',
      name: 'name',
    },
    {
      label: 'email',
      name: 'email',
    },
  ],
});

const options = {
  ajax: ajax,
  responsive: true,
  select: true,
  layout: {
    // top: {
    //   div: {
    //     text: 'Agent List',
    //   },
    // },
    topStart: {
      buttons: [
        {
          text: 'NewTest',
          action: function () {
            dtUserEditor.title('Add new record').buttons('Save').create();
          },
        },
        { extend: 'create', editor: dtUserEditor },
        { extend: 'edit', editor: dtUserEditor },
        { extend: 'remove', editor: dtUserEditor },
      ],
    },
  },
  columns: [
    { data: 'name', title: 'Name' },
    { data: 'email', title: 'email' },
  ],
};

function xhrEvent(eDt, settings, json, xhr) {
  console.log('Ajax loaded', json);
}

function drawEvent(eDt, settings) {
  console.log('DataTable redraw');
}

// dt.table.on('click', 'tbody td:not(:first-child)', function (e) {
//   editor.inline(this);
// });
// function inlineEdit(e) {
//   editor.inline(this);
// }
</script>

<template>
  <div>
    <!-- BEGIN breadcrumb -->
    <ol class="breadcrumb float-xl-end">
      <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
      <li class="breadcrumb-item"><a href="javascript:;">에이젼트 관리</a></li>
      <li class="breadcrumb-item active">
        <a href="javascript:;">에이젼트 목록</a>
      </li>
    </ol>
    <!-- END breadcrumb -->
    <!-- BEGIN page-header -->
    <h1 class="page-header">
      에이젼트 목록 <small>하위 에이전트는 + 키를 이용하세요</small>
    </h1>
    <!-- END page-header -->

    <!-- BEGIN #vue3TableLite -->
    <panel>
      <panel-header>
        <panel-title>에이전트 목록</panel-title>
        <panel-toolbar />
      </panel-header>
      <panel-body>
        <DataTable
          id="tableAgent"
          :options="options"
          class="table table-bordered display"
          width="100%"
          @xhr="xhrEvent"
          @draw="drawEvent"
          ref="table"
        >
        </DataTable>
      </panel-body>
    </panel>
    <!-- END #vue3TableLite -->
  </div>
</template>

<style>
/* @import 'bootstrap'; */
@import 'datatables.net-bs5';
@import '@datatables.net/editor-bs5';
@import 'datatables.net-select-bs5';
@import 'datatables.net-buttons-bs5';
</style>

When click NewTest button (or Other Button) , Error Uncaught TypeError: Cannot read properties of undefined (reading 'Modal')

http://localhost:5173/node_modules/.vite/deps/@datatables__net_editor-bs5.js

open: function(dte, append, callback) {
    if (!modal) {
      modal = new _bs.Modal(dom.content[0], { //<= error
        backdrop: "static",
        keyboard: false
      });
    }

help me. please.

check plases.
https://github.com/gamlebox/casinobox-web-frontend

casuist

test url
http://localhost:5173/agent/list

allan

You need to import Bootstrap:

import * as bootstrap from 'bootstrap';

And then tell Editor about it:

Editor.bootstrap( bootstrap );

That should hopefully do it.

Allan

casuist

Thanks! allan.
It's Works fine.