Suddenly getting "SearchPane requires Select" error

fwtag

Hi there,

currently, I am updating a project from PHP7 > PHP8 and Symfony 5 > Symfony 7. The project uses DataTables and DataTables Editor and worked fine.

But during this update process, after compiling the sources using yarn encore dev|prod, I am getting some weird errors in the console:

777.4baf86e1.js:2 jQuery.Deferred exception: Cannot read properties of undefined (reading '_select') TypeError: Cannot read properties of undefined (reading '_select')
    at r.A.select.init (http://kla-backend.ddev.site/build/398.8c9db4fd.js:2:5270)
    at HTMLDocument.<anonymous> (http://kla-backend.ddev.site/build/398.8c9db4fd.js:2:14281)
    at HTMLDocument.dispatch (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:55226)
    at g.handle (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:53217)
    at Object.trigger (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:85227)
    at HTMLTableElement.<anonymous> (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:85825)
    at E.each (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:18457)
    at E.fn.init.each (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:16936)
    at E.fn.init.trigger (http://kla-backend.ddev.site/build/777.4baf86e1.js:2:85800)
    at re (http://kla-backend.ddev.site/build/398.8c9db4fd.js:2:150377) undefined

777.4baf86e1.js:2 Uncaught Error: SearchPane requires Select
    at new t (398.8c9db4fd.js:2:238709)
    at Object.C [as fnInit] (398.8c9db4fd.js:2:258284)
    at 398.8c9db4fd.js:2:132738
    at Array.forEach (<anonymous>)
    at 398.8c9db4fd.js:2:132697
    at St (398.8c9db4fd.js:2:132768)
    at 398.8c9db4fd.js:2:138679
    at Kt (398.8c9db4fd.js:2:147944)
    at 398.8c9db4fd.js:2:138444
    at Ot (398.8c9db4fd.js:2:138454)
777.4baf86e1.js:2 Uncaught TypeError: Cannot read properties of undefined (reading '_select')
    at r.A.select.init (398.8c9db4fd.js:2:5270)
    at HTMLDocument.<anonymous> (398.8c9db4fd.js:2:14281)
    at HTMLDocument.dispatch (777.4baf86e1.js:2:55226)
    at g.handle (777.4baf86e1.js:2:53217)
    at Object.trigger (777.4baf86e1.js:2:85227)
    at HTMLTableElement.<anonymous> (777.4baf86e1.js:2:85825)
    at E.each (777.4baf86e1.js:2:18457)
    at E.fn.init.each (777.4baf86e1.js:2:16936)
    at E.fn.init.trigger (777.4baf86e1.js:2:85800)
    at re (398.8c9db4fd.js:2:150377)


I didn't change anything regarding the initialisation of the DataTables, nor change the entry points or something. It seems, as if there is one small change somewhere that produces the error.

DataTables and its extensions are added with yarn.

The setup is (more or less allways the same) like this (select: true was added by myself AFTER the error occurred, but did not change anything):

import 'datatables.net-select'
import 'datatables.net-searchpanes'
import 'datatables.net-editor'

(...)

$(document).ready(function () {
    const body = $('body');

    const selector = '#categories-datatable'
   
    (...)

    // @ts-ignore
    let table = $(selector).DataTable({
        select: true,
        ajax: {

(...)

Anybody an idea what's wrong here?

allan

Not immediately sure I'm afraid. SearchPanes has always required Select, but I see you have it included. Can you create a test case on StackBltiz or a minimal git repo showing the issue so I can look into it please?

Allan