Sign in
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Persona Theme: JS Error “Uncaught TypeError: contentWrapper is null”

  • This topic has 9 replies, 3 voices, and was last updated 8 months, 1 week ago by .
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #10159
    Avatar photolars

    I am using the Persona Free Theme for a vanilla website and get the following error in firefox:

    Uncaught TypeError: contentWrapper is null
        <anonymous> file:////Users/me/Projects/publii/sites/test/preview/assets/js/scripts.min.js?v=8190bbfcf662a6d5bf1ad35d88ad1ec9:35
        <anonymous> file:////Users/me/Projects/publii/sites/test/preview/assets/js/scripts.min.js?v=8190bbfcf662a6d5bf1ad35d88ad1ec9:42
    scripts.min.js:35:143

    in chrome:

    scripts.min.js?v=8190bbfcf662a6d5bf1ad35d88ad1ec9:35 Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll')
        at scripts.min.js?v=8190bbfcf662a6d5bf1ad35d88ad1ec9:35:158
        at scripts.min.js?v=8190bbfcf662a6d5bf1ad35d88ad1ec9:42:60
    (anonymous) @ scripts.min.js?v=8190bbfcf662a6d5bf1ad35d88ad1ec9:35
    (anonymous) @ scripts.min.js?v=8190bbfcf662a6d5bf1ad35d88ad1ec9:42

    To reproduce the error, just create a new Website Project and set theme to Persona_Free (v.1.2.1.0).

     

    Where do you maintain the theme sources so this could be fixed properly upstream?

    #10163
    Avatar photoitips3727

    @lars

    I’m using the latest version of Publii (Version: 0.42.1, build 16233) with an Apple Mac, and when testing Persona theme — both the free and premium versions, it displays and performs with no obvious errors in Preview, with the latest current web browsers:

    – Firefox v114.0.2 (64-bit)
    – Chrome v114.0.5735.133 (Official Build) (x86_64)
    – Safari v16.5.1 (18615.2.9.11.7)
    – Opera One v100.0.4815.21 (x86_64)

    The Persona theme live demo at: https://demo.getpublii.eu/themes/persona/violet/ also displays and performs okay in the browsers above.

    Did you want to provide more details?

    You can contribute to the project at: https://github.com/GetPublii/Publii

    #10164
    Avatar photolars

    @itips3727 Thank you for looking at this issue. See for example https://demo.getpublii.eu/themes/persona/violet/gallery/ https://demo.getpublii.eu/themes/persona/violet/typography/ or https://demo.getpublii.eu/themes/persona/violet/404.html

    See scripts.js line 589 and 590:

    let contentWrapper = document.querySelector('.l-grid');

    if there is no l-grid class document.querySelector returns null. Therefore

    if (!contentWrapper) { return; }

    should be called before

    let articles = contentWrapper.querySelectorAll('.c-card');
    #10165
    Avatar photolars

    Where do you maintain the theme sources so this could be fixed properly upstream?

    I can help to fix the issue, but I didn’t find the themes repo. Therefore I just asked:

    Where do you maintain the theme sources so this could be fixed properly upstream?

    #10168
    Avatar photoitips3727

    @lars

    As I’m using an Apple Mac I’m not detecting any of the errors you mention when using the 4 web browsers I’ve listed above.

    If you’re using Microsoft Windows or Linux, maybe the problems is related to one of those OSes.

    For now, as far as I am aware it seems no other users have reported the problem you’re having.

    The Publii themes are created and maintained by GetPublii.com — @Bob or @Tomasz Dziuda — so perhaps your best solution might be to resubmit your issue in a new forum entry, but choose ‘Bug Report’ in the dropdown.

    #10170
    Avatar photoBob

    Hi,

    I’ve founded and fixed the JavaScript error we were encountering with the `radioButtonGroup` function. The issue was related to a missing .is-active class, which led to a TypeError.

    The updated theme packages containing the fix are now available for download.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #10171
    Avatar photolars

    Thank you Bob for taking care of this issue. I am wondering while you said “issue was related to a missing .is-active class”, as the error refers to a missing .l-grid class and looking at above mentioned examples show that there is no l-grid. I guess your fix addresses a different issue. Anyway I can’t see it in the new release (comparing v.1.2.1.0 with 1.2.2.0):

    diff -Naur persona_free_1.2.1.0 persona_free_1.2.2.0
    diff -Naur persona_free_1.2.1.0/config.json persona_free_1.2.2.0/config.json
    --- persona_free_1.2.1.0/config.json	2023-04-03 05:59:50.000000000 -0300
    +++ persona_free_1.2.2.0/config.json	2023-06-25 10:00:46.000000000 -0300
    @@ -1,6 +1,6 @@
     {
         "name": "Persona_Free",
    -    "version": "1.2.1.0",
    +    "version": "1.2.2.0",
         "author": "TidyCustoms <bob@tidycustoms.net>",
         "menus": {
             "mainMenu": {
    #10172
    Avatar photolars

    IMHO it would be easier if I could provide a pull request. Here comes the patch diff:

    diff --git a/assets/js/scripts.js b/assets/js/scripts.js
    index 0412ad0..41e3c6a 100755
    --- a/assets/js/scripts.js
    +++ b/assets/js/scripts.js
    @@ -587,9 +587,14 @@ if (searchButton) {
      (function () {
     	let layoutButtons = document.querySelectorAll('.switchers__item');
     	let contentWrapper = document.querySelector('.l-grid');
    +
    +	if (!contentWrapper) {
    +		return;
    +	}
    +
     	let articles = contentWrapper.querySelectorAll('.c-card');
     
    -	if (!contentWrapper || !layoutButtons.length || !articles.length) {
    +	if (!layoutButtons.length || !articles.length) {
     		return;
     	}
     

    It just makes sure that contentWrapper variable is not null before calling querySelectorAll().

    There are other places too, which may need to be fixed, see documentation on Document: querySelector() method > Return value:

    An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

    This is different to querySelectorAll() method, which returns an empty array if the selector was not found.

    #10173
    Avatar photoBob

    Oh, okay. So I found another script error in the filters section which is only available in the premium version.

    Regarding the “.l-grid problem”; I just solved it. This happens when this class is missing on the post pages, especially when the related posts section is disabled. Download version 1.2.3.0 and check it out.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #10174
    Avatar photolars

    Thank you Bob, for the quick fix.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.