DataTableBs4 import error

Su Myat

Hello!
When I use the "use" function with datatables.net-bs4 1.13.1 and datatables.net-select-bs4 1.5.0 in my vue file,

import DataTable from "datatables.net-vue3";
import DataTableBs4 from "datatables.net-bs4";
import SelectBs4 from "datatables.net-select-bs4";

DataTable.use(DataTableBs4);
DataTable.use(SelectBs4);

the following error appears in the browser's console:

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting '$')
at DataTable (null:2630:14)
at Comp.use (null:11841:3)
at setup (ConstructionSelection.vue:21:11)
at callWithErrorHandling (null:1373:18)
at setupStatefulComponent (null:6750:25)
at setupComponent (null:6713:36)
at mountComponent (null:5519:7)
at processComponent (null:5497:9)
at patch (null:5215:11)
at ReactiveEffect.componentUpdateFn [as fn] (null:5664:9)

I am using Vite+Vue3 and the following is my vite.config.js file,

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import inject from '@rollup/plugin-inject'

    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        vue(),
        inject({
          $: 'jquery',
          jQuery: 'jquery',
        })
      ],
      server: {
        host: true,
        port: 3000,
        strictPort: true,
        watch: {
          usePolling: true
        }
      },
      base: "/rims/new/",
    })

My project is on deadline, so、Could you please help me to solve the problem?

allan

You are probably running into the same issue as in this thread. That said, you haven't posted your full code, so I can't be sure. Can you show me your full JS please? Or a repo that reproduces the issue.

Allan

Su Myat

Hi Allan,
here is my git repository:

https://github.com/sumyatmoe/DataTables-Vue-Test

Please check my code.
Thanks in advance.

allan

Thanks! Remove:

// packages activation
DataTable.use(DataTableBs4);
DataTable.use(SelectBs4);

from your HelloWorld.vue file. Vite is picking up the new module files which don't need that.

Allan

Su Myat

Hi Allan
Thanks for your confirm!

But when I remove

// packages activation
DataTable.use(DataTableBs4);
DataTable.use(SelectBs4);

from my HelloWorld.vue, the bootstrap and select functions of datatable do not work and the datatable is not displayed correctly.

I have uploaded my project source code in which I added the datatable that you can confirm.
From my new HelloWorld.vue, if you remove the above use() function, you will see that the datatable's search box, paginate and row select do not work.

Here is my git repository:
https://github.com/sumyatmoe/datatables-test

Could you please check and confirm?
Thanks!

allan

Sorry - yes I see the error now. Our Vue component needs to be updated for DataTables 1.13. I'm working on that right now and will post back shortly.

Allan

allan

To follow up on this - it was, as I mentioned, an incompatibility in the Vue component for DataTables and DataTables 1.13 (due to the new ES module support in 1.13).

I've made two releases to fix this:

1. v1.0.1 of this plug-in has been release which uses the same API as before, but has a fixed dependency of DataTables 1.12.1. The v1.x releases will not work with newer releases of DataTables!
2. v2.0.0 has also been released with an updated API that supports DataTables 1.13 and newer.

The new API is very similar to what we had before, but instead of assigning extensions through the .use() method, you now build up the DataTables module you want and assign it to the component - e.g. in this case:

import DataTable from 'datatables.net-vue3';
import DataTablesLib from 'datatables.net';
import 'datatables.net-select';

DataTable.use(DataTablesLib);

Everything else remains the same. The documentation here has been updated for the new v2 API.

Apologies for having missed this before 1.13 dropped!

Allan

Su Myat

Hi Allan!
Sorry for the late reply.

I updated the datatables.net-vue3 to 2.0.0 and with
datatables.net: 1.13.1
datatables.net-vue3: 2.0.0,
and aslo after modifying the code according to the instructions, I was able to confirm that the datatable was displayed correctly.

Thank you very much for your contribution.
this was very helpful!