node_modules/datatables.net/js/dataTables.mjs (951:2) @ extend ⨯ TypeError: $.extend is not a func

shoom

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: i am trying to install Datatables and use it in my nextjs 14 project. If i use npm method - i get this error.
If i use cdn to put in the JavaScript files in a Script. I have to initialize the DataTable in a <Script /> tag? Then if i want to provide my own data from my api calls, it is in a normal function and i cant parse this data to the Initialization of my DataTable as it is in a <Script /> tag. This is what my layout.js looks like
<Script strategy="beforeInteractive" src="https://code.jquery.com/jquery-3.7.1.js" />
<Script strategy="beforeInteractive" src="https://cdn.datatables.net/2.0.2/js/dataTables.js" />
<Script id="dataTableScript">
{`
// const data=getClientData();
// console.log(data);
const table = new DataTable('#example');

                table.on('click', 'tbody tr', function (e) {
                    e.currentTarget.classList.toggle('selected');
                });

                document.querySelector('#button').addEventListener('click', function () {
                    alert(table.rows('.selected').data().length + ' row(s) selected');
                });
            `}
        </Script>

How do i achieve my config, to use DataTables and provide my own API data to the table. Does the JS have to be in a <Script /> tag as it is not working outside it. If i use NPM to install datatables.net-dt, i get the above error of "TypeError: $.extend is not a function"
Basically where do i add the javascript logic to my next js project, besides from the script tag as i want to add external data from api to it.

Miguel_io

I have the same problem

Any solution?

allan

Can you link to a test case showing the issue please? Stackbltiz or a git repo showing it would be ideal.

Allan

Miguel_io

Hi Allan
As you can see, if you launch the project in dev mode, the error is displayed in the terminal but the component works correctly.
The problem comes when you try to build the application and it throws the error

(in StackBlitz the error description is different but it is in the same file)

https://stackblitz.com/edit/stackblitz-starters-vc7skhxb

CHIAPANETCODE

Has anyone solved this?

allan

See this thread for a solution.

Allan