Support » Plugin: Contact Form 7 » Uncaught TypeError: e.wpcf7.parent.querySelector(…) is null

  • Resolved Aaron T. Grogg

    (@aarontgrogg)


    Having a new issue on an existing site:

    Uncaught TypeError: e.wpcf7.parent.querySelector(...) is null
        l https://capitolmotors.com/wp-content/plugins/contact-form-7/includes/js/index.js:1
        <anonymous> https://capitolmotors.com/wp-content/plugins/contact-form-7/includes/js/index.js:1
        X https://capitolmotors.com/wp-includes/js/dist/api-fetch.min.js:2
        X https://capitolmotors.com/wp-includes/js/dist/api-fetch.min.js:2
        p https://capitolmotors.com/wp-content/plugins/contact-form-7/includes/js/index.js:1
        b https://capitolmotors.com/wp-content/plugins/contact-form-7/includes/js/index.js:1
        b https://capitolmotors.com/wp-content/plugins/contact-form-7/includes/js/index.js:1

    This is reported in dev console as coming from index.js:1:4356 and is preventing all CF7 forms from submitting, the page just sits there when the Submit button is clicked…

    Current setup:
    – WP: 5.6.2
    – CF7: 5.4

    Anyone else seeing this?

    Appreciate any help or direction.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    What other plugins and theme do you use on the site?

    Thread Starter Aaron T. Grogg

    (@aarontgrogg)

    Thanks for the reply.

    Theme: Automotive By Theme Suite, Version: 11.9.8
    Plugins: Numerous

    Per standard practice…

    1. Deactivated all plugins and reverted to Twenty Twenty-One theme, and error message disappeared.
    2. Gradually restored all plugins, still no error.
    3. Restored Automotive theme, still no error.
    4. Reactivated page caching (via WP-Optimize), error returned.
    5. Deactivated page caching, no error.
    6. Reactivated page caching again, error returned.

    Error occurs in:
    /wp-content/plugins/contact-form-7/includes/js/index.js
    On line 230 (via Pretty Print):
    e.wpcf7.parent.querySelector('.screen-reader-response [role="status"]').innerText = '',

    The querySelector returns null, so innerText throws an error.

    For some reason, when page caching is turned off, this line is never called (breakpoint never reached)…

    Any guess???

    Thread Starter Aaron T. Grogg

    (@aarontgrogg)

    FYI, I have also tested the same installation, Automotive theme activated, all plugins activated, but using CF7 v.5.3.2, with page caching activated, and I do NOT get this error message:
    https://dev.capitolmotors.com/contact/

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Doesn’t the result mean just that WP-Optimize is causing the error?

    Thread Starter Aaron T. Grogg

    (@aarontgrogg)

    Strictly speaking, yes, but also, why would a cached page break the plugin’s JS?

    Also, same error when using WP Super Cache, which is another pretty common page caching plugin.

    So far, WP Fastest Cache seems to be error free, will continue with that one for now.
    Correction: WP Fastest Cache also throws the error, just not on page load as the other two do, but it does throw the same error once the “SUBMIT” button is clicked…

    This is an issue, and I realize it is a conflict between plugins, but when one plugin starts conflicting with multiple plugins, the first plugin has to re-examined…

    I hope I have provided enough debugging information to be helpful, but if not, happy to help some more.

    Thanks.

    • This reply was modified 2 months ago by Aaron T. Grogg. Reason: Turns out WP Fastest Cache also breaks
    Plugin Author Takayuki Miyoshi

    (@takayukister)

    The most direct cause of this TypeError is known that someone removes <p role="status" aria-live="polite" aria-atomic="true"></p> that should normally exist under <div class="screen-reader-response"></div>. I don’t know who does that and why, but from the result of your testing, it is likely to be the WP-Optimize plugin, in the case of your site.

    Thread Starter Aaron T. Grogg

    (@aarontgrogg)

    Okay, apologies, this is NOT related to any caching plugin, but apparently the theme, and I was not seeing it earlier because, without a caching plugin, the error only appears after clicking Submit

    The difference appears to be the change from v5.3.2’s:
    $( '[role="status"]', $response ).html( data.message );
    to v5.4’s:
    e.wpcf7.parent.querySelector('.screen-reader-response [role="status"]').innerText

    As 5.3.2 uses a comma in the selector, it allows for [role="status"] to be missing, whereas 5.4 requires [role="status"] to be within .screen-reader-response.

    And for some reason, when using our theme, the <p role="status" aria-live="polite" aria-atomic="true"></p> element is missing in the markup.

    If you have any idea what might cause this, I would love to hear it, but if not, I will begin that investigation, and again, my apologies for wasting your time…

    Thread Starter Aaron T. Grogg

    (@aarontgrogg)

    On the outside chance anyone else encounters this, it took a fair bit of tracking to find the culprit, but it boils down to the theme, maybe justifiably, removing empty paragraph tags, I guess trying to keep things clean?
    Theme file:
    /wp-content/themes/automotive/js/main.js
    Line 7:
    $('p:empty').remove();

    I will try contacting the theme developer to ask if they can remove this in the future (though unlikely), but in the short-term, I have added a script to my template that adds a &nbsp; inside <p role="status" aria-live="polite" aria-atomic="true"></p> so it is no longer empty, so the theme script no longer deletes it…

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Oh, really? I was almost blaming the wrong person. I have to apologize to the WP-Optimize devs.

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