Cannot read properties of undefined (reading 'dataTable') in vitest

impooja

TypeError: Cannot read properties of undefined (reading 'dataTable')
❯ new module.exports node_modules/datatables.net-bs5/js/dataTables.bootstrap5.js:27:16
25| }
26|
27| if ( ! $.fn.dataTable ) {
| ^
28| require('datatables.net')(root, $);
29| }
❯ Proxy.mounted node_modules/datatables.net-vue3/dist/datatables.net-vue.ssr.js:156:16
❯ node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2728:40
❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22
❯ callWithAsyncErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:166:21
❯ Array.hook.__weh.hook.__weh node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2702:29
❯ flushPostFlushCbs node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:338:47
❯ render node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6201:9
❯ mount node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4432:25
❯ Object.app.mount node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1549:23

import DataTable from 'datatables.net-vue3'; import DataTablesLib from 'datatables.net-bs5'; import { ref,onMounted} from 'vue' DataTable.use(DataTablesLib); const props = defineProps(['columns','data','id']); const emit = defineEmits(["handleEdit", "handleDelete"]);

<template>
<DataTable
:columns="props.columns"
:data="props.data"
:id="props.id"
class="table table-hover"
width="100%"
ref="tableRef"
>
<thead>
<tr>
<slot></slot>
</tr>
</thead>
</DataTable>
</template>
<style>
@import 'bootstrap';
@import 'datatables.net-bs5';
</style>

allan

Can you create a minimal repo or a StackBlitz example that reproduces the issue so we can look into it please?

Allan

impooja

Hey Allan , I have created git repo with example https://github.com/impooja/Datatable_issue.
Commands to run project : npm install -> npm run dev
Command to run test case: npm run test

This issue is only occurring while running the test case. Please help!

allan

Thanks for the test case. The first thing I did was update DataTables to 1.13.7 from 1.13.1, which helped a little, but not enough.

The tests are loading the CommonJS file for DataTables' Bootstrap 5 integration (and presumably the other CommonJS files for the other parts), while the main build is using ES Modules. There is some discussion about it in the Vitest git repo here.

So fundamentally, you wouldn't actually be testing the code that would be running on the client-side! That seems like a really major issue with the testing there.

Moreover, there is no window in Vitest's run - so the initialisation of the DataTable has to be different - you need to pass in the window document - e.g.:

var DataTable = require('datatables.net-bs5')(window);

where window is a fake window object. I haven't used vitest before, I don't know if it provides one, but again you would be writing and tested code that wouldn't be used on the client-side.

I think you should reach out to the Vitest people here. I'm happy to work with them, but if the tests aren't running the same code that is being used on the client-side, I can't see how that would be useful as a test. It isn't clear to me from that thread in their repo how you would get both to use ESM without specifying each ES Module individually.

You might want to consider a test framework that uses the files that Vite has built.

Allan

allan

I've added a comment in that Vitest thread as I'm really confused by this situation.

impooja

Hey Allan, Thanks for your prompt response.
I can see there is some response on your comment here.
https://github.com/vitest-dev/vitest/discussions/4233

Let me know if you are able to resolve this.

Thanks & Regards
Pooja

impooja

Hi @allan ,

Are there any updates on this issue?
Additionally, is there any quick fix that I can implement for now? This is quite urgent. Your prompt assistance would be highly appreciated.

Pooja

allan

Per the discussion in the vitest repo, yes, I plan to make a change to our packages to let this work. However, I'll not make it in a patch release since it could change build behaviour for existing installs. The change will land for DataTables 2. I hope to release that by the end of the year but I'm not yet certain.

The workaround appears to be to manually list the modules, per other parts of the vitest discussion.

Allan