vue 3 component with ssr(server-side-rendering)

MiaWalkthruit

after the recent update, seems datatables.net doesn't support ssr anymore. Got the error below with the same code base which works previously:

ReferenceError: window is not defined
at /Users/xxx/xxx/xxx/node_modules/datatables.net/js/jquery.dataTables.js:57:24
at Object.<anonymous> (/Users/xxx/xxx/xxx/node_modules/datatables.net/js/jquery.dataTables.js:65:1)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:533:24)
at async nodeImport (file:///Users/miayao/projects/ads_platform/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:53443:21)
at async eval (/src/components/ListCampaigns.vue:13:31)
at async instantiateModule (file:///Users/xxx/xxx/xxx/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:53364:9)

allan

Can you show me how you are including DataTables please?

With CommonJS in a windowless environment, you need to pass the window into the CommonJS loader - e.g.:

const DataTable = require('datatables.net')(window);

See the Window-less environments section here. That hasn't changed though - it was required before as well.

What has changed is that if you are using a window-ed environment, you no longer need to execute the returned function.

Thanks,
Allan

MiaWalkthruit

Hi Allan,

Thanks for your reply, this is how I import DataTables as below:

import DataTable from "datatables.net-vue3";
import DataTablesLib from "datatables.net";
DataTable.use(DataTablesLib);

I'm using vue 3 with SSR.

Thanks,
Mia

allan

Right - and I guess this is down compiling to CommonJS - so what you need to do is:

import DataTable from "datatables.net-vue3";
import DataTablesFactory from "datatables.net";
DataTable.use(DataTablesFactory(window));

Update window to whatever you've called your windowless window environment.

I'm really surprised it worked before if you weren't doing that to be honest!

Allan