Next.js datatables.net-react

Next.js datatables.net-react

mateuszzmateuszz Posts: 1Questions: 1Answers: 0

It is working fine when developer mode, but throwing an error while compiling to production:

npm run build

> nextjs@0.1.0 build
> next build

  ▲ Next.js 14.2.13

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (0/9)  [=   ]TypeError: nm.extend is not a function

The issue arises from the following code snippet:

import DataTable from "datatables.net-react";
import DT from "datatables.net-dt";

DataTable.use(DT);

Removing the line DataTable.use(DT); allows the compilation to complete successfully without any errors.

What to do?

Answers

  • allanallan Posts: 63,810Questions: 1Answers: 10,516 Site admin

    Can you create a minimal repo or a Stackbltiz showing the issue so I can take a look into it please? It sounds like the jQuery dependency might not be getting loaded in perhaps? I'd need to be able to see it to know for sure.

    Allan

  • CHIAPANETCODECHIAPANETCODE Posts: 2Questions: 0Answers: 0
    edited January 13

    I have the same problem :( :( , didyou resolve the bug?

  • allanallan Posts: 63,810Questions: 1Answers: 10,516 Site admin
    edited January 16

    Here is how it can be done: https://stackblitz.com/edit/nextjs-f2ghfcsu?file=app%2Fpage.tsx .

    This is the key for how to define the component:

    const DataTable = dynamic(
      async () => {
        const dtReact = import('datatables.net-react');
        const dtNet = import('datatables.net-dt');
    
        const [reactMod, dtNetMod] = await Promise.all([dtReact, dtNet]);
    
        reactMod.default.use(dtNetMod.default);
        return reactMod.default;
      },
      { ssr: false }
    );
    

    I wondered about trying to package it up into a Next.js specific component, but the styling integrations make that a bit awkward - specifically how you need to specify the full path for the style sheet, and that the import string for the styling package can't be dynamic.

    I'd welcome feedback on how this can be improved - there must be a way to make it nicer.

    Allan

Sign In or Register to comment.