DataTable.use is not a function, after building with Nuxt3

pilley

I am building an app using Nuxt3 and Vue3 and in dev mode it is working fine however when I build it and run I get

$ node .output/server/index.mjs
Listening on http://[::]:3000
Polyfilling crypto...
[Vue Router warn]: uncaught error during route navigation:
TypeError: DataTable.use is not a function

I am importing as described in the docs
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';

DataTable.use(DataTablesCore);

Any ideas why it isnt being found

pilley

Hi I solved it just now, it was a PEBKAC issue.

I was calling DataTable.use from outside of the setup().

pilley

Nope spoke to soon, still stuck

Any ideas

pilley

Ok I think I have this solved for anyone having the same issue

I needed to move DataTable.use(DataTablesCore) to onMounted.

So it should look like this

onMounted(() => { DataTable.use(DataTablesCore); });

allan

Interesting! I haven't encountered that before - normally what you have in your first post will do the trick, but obviously something has gone wrong. I'm not sure what though. Good to hear you have a workaround though.

Allan

yudistirasd

got same issue here after updating datatables.net-vue3 from 2.1.3 to 3.0.0, my package json :

nuxt: "^3.12.3",
vue: "^3.4.31",
datatables.net-bs5: "^2.1.0",
datatables.net-fixedheader-bs5: "^4.0.1",
datatables.net-select-bs5: "^2.0.3",
datatables.net-vue3: "^3.0.0",

when trying to downgrade the version, it can run fine on nuxt build

allan

Can you use Stackbltiz to build an example showing the issue please? There isn't much to go on in your post (i.e. no code). As you can see [in this example(https://stackblitz.com/edit/datatables-net-vue3-simple-gxl6mg?file=src%2FApp.vue), there is a .use() function on the export from datatables.net-vue3.

Thanks,
Allan