Error while using NextJS + datatables.net

gustavotrapp

Link to test case:
https://github.com/gustavotrapp/datatables-testing

Error messages shown:
⨯ node_modules.pnpm\jquery@3.7.1\node_modules\jquery\dist\jquery.js (24:26) @ document
⨯ TypeError: Cannot read properties of undefined (reading 'document')
at webpack_require (C:\Users\Gustavo Trapp\temporary-sketch.next\server\webpack-runtime.js:33:42)
at webpack_require (C:\Users\Gustavo Trapp\temporary-sketch.next\server\webpack-runtime.js:33:42)
at eval (./src/app/components/table.tsx:9:72)
at (ssr)/./src/app/components/table.tsx (C:\Users\Gustavo Trapp\temporary-sketch.next\server\app\page.js:151:1)
at webpack_require (C:\Users\Gustavo Trapp\temporary-sketch.next\server\webpack-runtime.js:33:42)
null

Description of problem:

I'm experiment datatables.net currently with NextJS 14.10, and I am getting this annoying problem saying that the document isn't defined, please if I am missing any packages, or missing a configuration, please help. Thank you

allan

It isn't so much a DataTables issue, as how Next.js' server-side rendering works. See this SO discussion.

I've not used Next.js myself, but it looks like you'll need to use useEffect.

Allan

gustavotrapp

See allan that is indeed the point, I AM using useEffect, if looked at my github link you would've seen that indeed I'm using it inside a client component, and am calling the DataTable object inside an useEffect.

allan

I'll try it tomorrow. I don't know much about Next.js though, so I'm not sure how much use I'll be able to be...

Allan

allan

Do I need to create a database for it, or can I run it without?

Allan

allan

I tried creating a MySQL connection which I think worked, and then it failed on an sqlite connection. Can you give me step by step instructions on how to get to the point of the document error you are seeing please?

Thanks,
Allan