Bug 41328 - All KohaTable tables broken in Vue components
Summary: All KohaTable tables broken in Vue components
Status: Pushed to main
Alias: None
Product: Koha
Classification: Unclassified
Component: Architecture, internals, and plumbing (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low blocker
Assignee: Jonathan Druart
QA Contact: Matt Blenkinsop
URL:
Keywords:
Depends on: 38426
Blocks:
  Show dependency treegraph
 
Reported: 2025-11-28 09:03 UTC by Jonathan Druart
Modified: 2025-12-01 16:11 UTC (History)
7 users (show)

See Also:
GIT URL:
Initiative type: ---
Sponsorship status: ---
Comma delimited list of Sponsors:
Crowdfunding goal: 0
Patch complexity: Trivial patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
25.11.00
Circulation function:


Attachments
Bug 41328: Fix incorrect use of ref in KohaTable.vue (1.71 KB, patch)
2025-11-28 09:04 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 41328: Fix incorrect use of ref in KohaTable.vue (1.76 KB, patch)
2025-12-01 14:07 UTC, Lucas Gass (lukeg)
Details | Diff | Splinter Review
Bug 41328: Fix incorrect use of ref in KohaTable.vue (1.82 KB, patch)
2025-12-01 16:07 UTC, Matt Blenkinsop
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Druart 2025-11-28 09:03:24 UTC
See the current cypress failures on Jenkins

> JS Warning detected: "[Vue warn]: Unhandled error during execution of mounted hook" "\n" " at <KohaTable" "ref=\"table\"" "url=\"/api/v1/preservation/waiting-list/items\"" "options=" {"embed":"biblio","orderCe
Comment 1 Jonathan Druart 2025-11-28 09:04:53 UTC
Created attachment 190011 [details] [review]
Bug 41328: Fix incorrect use of ref in KohaTable.vue

This patch fixes DataTables instantiation in Vue components. There was
an error in the console

Uncaught (in promise) TypeError: table.value.dt is not a function
Comment 2 David Nind 2025-11-28 19:03:34 UTC
Should I see the error for tables in Vue enabled modules?

I enabled ERM and created an agreement.

I didn't get an error in the console using the developer tools.
Comment 3 Jonathan Druart 2025-11-29 07:32:22 UTC
Yes you should have noticed the error. Did you have the latest ktd images?
Comment 4 David Nind 2025-11-29 08:14:37 UTC
(In reply to Jonathan Druart from comment #3)
> Yes you should have noticed the error. Did you have the latest ktd images?

Everything is the latest.
Comment 5 Jonathan Druart 2025-12-01 08:38:37 UTC
I do confirm I get the error with the latest images. Maybe try to remove your local node_modules (/kohadevbox/koha/node_modules) before starting ktd up.
Comment 6 David Nind 2025-12-01 13:12:28 UTC
I can confirm that I get the warnings and error by deleting the node_modules directory in my Koha git clone directory.

However, there are now lots of Vue Router warnings, that I didn't get before I deleted the directory.

After starting up KTD and enabling preservation and ERM modules, is there anything else I need to do?

1. Before starting up KTD, in my koha git clone directory: sudo rm -R node_modules
2. KTD: git pull (was one git change - Issue #517: Wipe possible residual directories from previous engine), removed all images, ktd pull 
3. Acquisitions:
   - Acquisition > Vendors > Search (table shown with one vendor, My Vendor)
   - Warnings and errors:
     . ResourceList.vue:318 [Vue warn]: Unhandled error during execution of mounted hook 
     . KohaTable.vue:228 Uncaught (in promise) TypeError: table.value.dt is not a function
4. ERM:
   - Several warnings:
     . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings"
     . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings/local"
     . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eusage"
   - ResourceList.vue:314 [Vue warn]: Unhandled error during execution of mounted hook 
   - Uncaught (in promise) TypeError: table.value.dt is not a function
5. Preservation:
   - Add a new processing:
     . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/preservation/settings/processings"
     . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/preservation/settings/processings"
   - Add a new train:
     . ResourceList.vue:318 [Vue warn]: Unhandled error during execution of mounted hook
     . KohaTable.vue:228 Uncaught (in promise) TypeError: table.value.dt is not a function
6. Apply patch
7. yarn build (note: get lots of 'Deprecation warnings') (is something else required here?)
8. restart_all
9. Browser history/cache deleted
10. Acquisitions:
   - No warnings, but noticable delay loading table of vendors (with only two vendors, "Processing..." is shown as well)
11. ERM:
    - Noticable delay in loading ERM home page
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings/local"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eusage"
    - Loading agreements page (no noticable delay in loading): Same warnings as for home page
    - Loading licenses page: Same warnings as for home page
    - Loading packages and titles pages: 
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings/local"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings/local"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eusage"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings/local"
    - Loading data providers and reports page:
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eusage"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eholdings/local"
      . [Vue Router warn]: No match found for location with path "/cgi-bin/koha/erm/eusage"
12. Preservation:
    - Noticable delay in loading preservation home page
    - No warnings or errors
13. I used Chromium with the developer tools. Got similar warnings using Firefox developer edition, but the pages loaded noticably faster.
Comment 7 Jonathan Druart 2025-12-01 13:37:29 UTC
Yes, I have noticed them as well, they should be reported separately.
Comment 8 Lucas Gass (lukeg) 2025-12-01 14:06:54 UTC
This fixed the problem described so I am adding my sign-off here. 

For the warns that David mentioned I filed a separate issue:


https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41336
Comment 9 Lucas Gass (lukeg) 2025-12-01 14:07:44 UTC
Created attachment 190048 [details] [review]
Bug 41328: Fix incorrect use of ref in KohaTable.vue

This patch fixes DataTables instantiation in Vue components. There was
an error in the console

Uncaught (in promise) TypeError: table.value.dt is not a function

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 10 Matt Blenkinsop 2025-12-01 16:07:23 UTC
Created attachment 190059 [details] [review]
Bug 41328: Fix incorrect use of ref in KohaTable.vue

This patch fixes DataTables instantiation in Vue components. There was
an error in the console

Uncaught (in promise) TypeError: table.value.dt is not a function

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Matt Blenkinsop <matt.blenkinsop@openfifth.co.uk>
Comment 11 Lucas Gass (lukeg) 2025-12-01 16:11:39 UTC
Nice work everyone!

Pushed to main for 25.11