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”

June 23, 2023 at 7:41 pm #10159
[anonymous]
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?
June 23, 2023 at 10:59 pm #10163

[anonymous]

@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

June 24, 2023 at 3:03 am #10164
[anonymous]
@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');
```
June 24, 2023 at 3:00 pm #10165

[anonymous]

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?

June 24, 2023 at 9:55 pm #10168

[anonymous]

@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.

June 25, 2023 at 2:05 pm #10170

Bob

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.

June 25, 2023 at 4:47 pm #10171
[anonymous]
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": {
```
June 25, 2023 at 5:15 pm #10172
[anonymous]
IMHO it would be easier if I could provide a pull request. Here comes the ~~patch~~ diff:
```
diff --git a/assets/js/scripts.min.js b/assets/js/scripts.min.js
index 0412ad0..41e3c6a 100755
--- a/assets/js/scripts.min.js
+++ b/assets/js/scripts.min.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.
June 25, 2023 at 5:20 pm #10173

Bob

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.

June 25, 2023 at 5:33 pm #10174

[anonymous]

Thank you Bob, for the quick fix.