DataTableBs4 import error

DataTableBs4 import error

Su MyatSu Myat Posts: 4Questions: 0Answers: 0

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?

Replies

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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 MyatSu Myat Posts: 4Questions: 0Answers: 0

    Hi Allan,
    here is my git repository:

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

    Please check my code.
    Thanks in advance.

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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 MyatSu Myat Posts: 4Questions: 0Answers: 0

    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!

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    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 MyatSu Myat Posts: 4Questions: 0Answers: 0

    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!

Sign In or Register to comment.