Page list is hidden after upgrading to 4.12

Silverstripe Version: 4.12

After upgrading to 4.12 the page List doesn’t show on the Pages page. It appears to be hidden.

I see the following error in the browser console

vendor.js?m=1672189290:1 Uncaught TypeError: el.getAttribute is not a function
    at t.eval [as matches] (eval at <anonymous> (vendor.js?m=1672189290:1:2223002), <anonymous>:6:14)
    at e (vendor.js?m=1672189290:1:2228100)
    at Array.<anonymous> (vendor.js?m=1672189290:1:2239856)
    at HTMLDocument.<anonymous> (vendor.js?m=1672189290:1:2240488)
    at HTMLDocument.dispatch (vendor.js?m=1672189290:1:772555)
    at v.handle (vendor.js?m=1672189290:1:770529)
    at Object.trigger (vendor.js?m=1672189290:1:794438)
    at e.fn.init.triggerHandler (vendor.js?m=1672189290:1:795129)
    at n (vendor.js?m=1672189290:1:2230677)
    at MutationObserver.r (vendor.js?m=1672189290:1:2230805)
eval @ VM6946:6
e @ vendor.js?m=1672189290:1
(anonymous) @ vendor.js?m=1672189290:1
(anonymous) @ vendor.js?m=1672189290:1
dispatch @ vendor.js?m=1672189290:1
v.handle @ vendor.js?m=1672189290:1
trigger @ vendor.js?m=1672189290:1
triggerHandler @ vendor.js?m=1672189290:1
n @ vendor.js?m=1672189290:1
r @ vendor.js?m=1672189290:1

vendor.js?m=1672189290:1 Uncaught TypeError: el.getAttribute is not a function
    at t.eval [as matches] (eval at <anonymous> (vendor.js?m=1672189290:1:2223002), <anonymous>:6:14)
    at e (vendor.js?m=1672189290:1:2228100)
    at Array.<anonymous> (vendor.js?m=1672189290:1:2239856)
    at HTMLDocument.<anonymous> (vendor.js?m=1672189290:1:2240488)
    at HTMLDocument.dispatch (vendor.js?m=1672189290:1:772555)
    at v.handle (vendor.js?m=1672189290:1:770529)
    at Object.trigger (vendor.js?m=1672189290:1:794438)
    at e.fn.init.triggerHandler (vendor.js?m=1672189290:1:795129)
    at n (vendor.js?m=1672189290:1:2230677)
    at MutationObserver.r (vendor.js?m=1672189290:1:2230805)

Does anyone know how i can debug or solve this issue?

You say “Silverstripe Version: 4.12”, but Silverstripe CMS is really a collection of modules which can all have separate versions. It seems likely to me that you have updated silverstripe/admin to 1.12 but haven’t updated one of the other modules, leading to a mismatch in javascript syntaxes. Can you please use the following command and paste the output here?

composer show | grep silverstripe/

This should should the installed versions of all silverstripe modules in your project.

Here is the output of composer show | grep silverstripe/


silverstripe/admin                         1.12.0            
silverstripe/akismet                       4.4.0             
silverstripe/asset-admin                   1.12.0            
silverstripe/assets                        1.12.0            
silverstripe/blog                          3.11.0            
silverstripe/campaign-admin                1.12.0            
silverstripe/cms                           4.12.0            
silverstripe/comment-notifications         2.3.0             
silverstripe/comments                      3.9.0             
silverstripe/config                        1.5.0             
silverstripe/content-widget                2.4.0             
silverstripe/errorpage                     1.12.0            
silverstripe/event-dispatcher              0.1.3             
silverstripe/framework                     4.12.1            
silverstripe/graphql                       4.1.0             
silverstripe/lumberjack                    2.2.0             
silverstripe/mimevalidator                 2.4.0             
silverstripe/recipe-blog                   1.12.0            
silverstripe/recipe-cms                    4.12.0            
silverstripe/recipe-core                   4.12.0            
silverstripe/recipe-plugin                 1.7.0             
silverstripe/reports                       4.12.0            
silverstripe/session-manager               1.4.0             
silverstripe/siteconfig                    4.12.0            
silverstripe/spamprotection                3.3.0             
silverstripe/subsites                      2.7.0             
silverstripe/tagfield                      2.10.1            
silverstripe/vendor-plugin                 1.6.0             
silverstripe/versioned                     1.12.0            
silverstripe/versioned-admin               1.12.0            
silverstripe/widgets                       2.3.0

Hiya. Still trying to figure out if any of these dependencies might be causing the trouble.
Can you please paste in your composer.json file for me (feel free to change the name or other identifiable details if you want - just keep the require and require-dev parts as they are)? That way I can start a project with the same dependencies as you and see if I can reproduce this.

Hi
Thanks for helping me out,

Here is my composer.json showing the require and require-dev parts.

{
    "require": {
        "php": ">=7.3",
        "heyday/silverstripe-menumanager": "^3.0.5",
        "silverstripe/subsites": "^2.6",
        "undefinedoffset/sortablegridfield": "^2.0.8",
        "andrewhoule/silverstripe-photogallery": "*",
        "ezyang/htmlpurifier": "v4.13.0",
        "guttmann/silverstripe-menumanager-subsites": "^2.0.0",
        "silverstripe/recipe-cms": "^4.5.2",
        "silverstripe/recipe-blog": "^1.10"
    },
    "require-dev": {
        "phpunit/phpunit": "^9.2.5",
        "emteknetnz/upgrade-tools": "^2.2.1"
    },
   
}

With a fresh install using the dependencies you’ve got there I can’t reproduce the issue. I do note that lumberjack is amongst the modules in your project - it’s possible some project-specific configuration for that module is causing it, perhaps…

Do you see any errors in the developer console of your browser?

Hi,

here is a screenshot of the developer consoler

The lumberjack module is a dependencies of silverstripe/blog. It does use entwine as shown here silverstripe-lumberjack/GridField.js at master · silverstripe/silverstripe-lumberjack · GitHub

i wonder if its related to the jquery update https://docs.silverstripe.org/en/4/changelogs/4.12.0/#jquery

Sorry it’s taken me so long to respond.
When you hover over the vendor.js in that trace it should show you the actual path to the file, which will show which module it’s coming from. That will go a long way towards finding out what’s causing the problem.

Thanks Guy,

I’ve figured out what was causing the issue. It was caused by having the source_file_comments set in config.yml

source_file_comments: true

It was caused by the following code, i’m not sure where it comes from

Screen Shot 2023-01-18 at 8.22.06 PM

It was erroring when the el variable was a comment element
It was these 2 comments below. I’m not sure why these 2 comments as there are a lot in the document.

template /var/www/html/vendor/silverstripe/cms/templates/SilverStripe/CMS/Controllers/Includes/CMSMain_TreeView.ss

end template /var/www/html/vendor/silverstripe/admin/templates/SilverStripe/Admin/LeftAndMain.ss
Anyhow i’ll set source_file_comments to false for now.

Thanks for your help

Aha! That’s great you’ve resolved it. Could you please create a github issue in silverstripe/silverstripe-admin about this? That seems like something that ought to be fixed.