Javascript suddenly disabled on front end

  • Resolved jasonbear

    (@jasonbear)


    2 years, 9 months ago

    Hello, Frank,

    I’ve been using Autoptimize forever, and I also pay for Critical CSS. Everything had been running smoothly until sometime very recently. I’m always logged in while editing, so I don’t regularly view the site how visitors see it. I just noticed, however, that javascript is disabled *only* on the front end. (JS-dependent page elements either don’t work properly or are altogether missing.) Javascript still works fine on the back end when I’m logged in to WordPress/Divi.

    Disabling all other plugins has no impact. It’s directly and solely related to Autoptimize’s “Optimize JavaScript Code” setting. When I disable “Optimize JavaScript Code,” javascript once again works fine on the front end (but, of course, the site is slower because Autoptimize is no longer doing its job).

    About 5 days ago, I updated from Divi 4.14.2 to 4.14.4 (https://www.elegantthemes.com/api/changelog/divi.txt), so that could possibly be a factor.

    Please advise.

    • This topic was modified 2 years, 9 months ago by jasonbear.

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

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 9 months ago

    Hey Jason;
    * what are the JS optimization sub-options and exclusions?
    * when JavaScript optimization is active, what JS errors do you see on the browser console?

    frank

    Thread Starter jasonbear

    (@jasonbear)

    2 years, 9 months ago

    CHECKED:
    * Optimize JavaScript Code?
    * Aggregate JS-files?
    * Also aggregate inline JS?
    * Save aggregated script/css as static files?
    * Minify excluded CSS and JS files?
    * Enable 404 fallbacks?
    * Also optimize for logged in editors/ administrators?
    * Enable configuration per post/ page?

    ———-

    EXCLUSIONS:
    seal.js
    js/jquery/jquery.js
    js/jquery/jquery.min.js
    js/jquery/jquery-migrate.js
    js/jquery/jquery-migrate.min.js
    wp-includes/js/jquery/jquery.js
    wp-includes/js/jquery/jquery.min.js
    wp-includes/js/jquery/jquery-migrate.js
    wp-includes/js/jquery/jquery-migrate.min.js

    ———-

    JAVASCRIPT ERROR IN BROWSER WHEN JS OPTIMIZATION IS ACTIVE:
    “[Error] TypeError: null is not an object (evaluating ‘handle.parentNode’)
    (anonymous function) (autoptimize_ba8b2166aa80db5afc67697096c5abdf.js:6:217)
    Global Code (autoptimize_ba8b2166aa80db5afc67697096c5abdf.js:6:452)”

    Keep in mind, however, that the JS error has always been present, even when everything was working fine last week (and for many months prior).

    • This reply was modified 2 years, 9 months ago by jasonbear.
    • This reply was modified 2 years, 9 months ago by jasonbear.
    Thread Starter jasonbear

    (@jasonbear)

    2 years, 9 months ago

    UPDATE: Adding try-catch wrapping fixes the problem, but I’ve never had that activated before. I’d really prefer not to have to use that workaround technique because—from what I’ve read—it’s essentially a hack that degrades performance by up to 90%. How can I identify the script that’s suddenly not liking AO’s optimization?

    BTW, the “null is not an object (evaluating ‘handle.parentNode’)” error is now gone, as well.

    • This reply was modified 2 years, 9 months ago by jasonbear.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 9 months ago

    Morning Jason; does unticking “also aggregate inline JS” change anything (with try/catch off)?

    Thread Starter jasonbear

    (@jasonbear)

    2 years, 9 months ago

    Unticking “also aggregate inline JS” (with try/catch off) re-enables some of the JS elements, but not all. For example, my “hello bar” at the top of the page is still missing.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 9 months ago

    OK, next up; does excluding wp-content/themes from JS optimization help?

    Thread Starter jasonbear

    (@jasonbear)

    2 years, 9 months ago

    Nope.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 9 months ago

    hmm, so not divi 😉

    and excluding wp-content/plugins ?

    Thread Starter jasonbear

    (@jasonbear)

    2 years, 9 months ago

    Excluding wp-content/plugins results in my missing lazy-loaded images appearing again, but with no lazy loading effect. They appear immediately, whereas previously they would “fade in” upon scrolling down the page.

    Basically, all “on scroll” events are still missing.

    • This reply was modified 2 years, 9 months ago by jasonbear.
    • This reply was modified 2 years, 9 months ago by jasonbear.
    • This reply was modified 2 years, 9 months ago by jasonbear.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 9 months ago

    Confusing … :-/

    Based on the JS error you mentioned, taking into account the Divi update and looking at the unoptimized HTML source, I see that Divi has inline JS that is acting on inline CSS, can you add divi-style-parent-inline-inline-css to both the JS and CSS exclusions?

    Thread Starter jasonbear

    (@jasonbear)

    2 years, 9 months ago

    OK, I think you figured out the main conflict, which seems to involve “divi-style-parent-inline-inline-css.” 🙂

    OPTION 1
    Applying ONLY the JS exclusion results in:
    1. full functionality;
    2. JS error in Safari console.

    OPTION 2
    Applying ONLY the CSS exclusion results in:
    1. full functionality;
    2. *NO* JS error in Safari console.

    OPTION 3
    Applying both the CSS and JS exclusions results in:
    1. full functionality;
    2. *NO* JS error in Safari console.

    So, it appears that Option 2 is the least intrusive way to solve the problem.

    I’d love to be able to tell the Divi people which one of their specific changes in Divi 4.14.4 caused the JS to break when it had never broken across over 15 months’ worth of previous Divi updates. I can only assume that my site will be a bit slower due to things no longer being optimized in “divi-style-parent-inline-inline-css.” Do you have any idea what I should tell them?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    2 years, 9 months ago

    Well, you can tell them that at least in AO’s default configuration inline CSS gets aggregated, so having JS that targets inline CSS can fail. But I doubt they’ll care much … 😉

    Thread Starter jasonbear

    (@jasonbear)

    2 years, 9 months ago

    OK, I’ll relay that information to Divi.

    Thank you very much for your help, Frank! I hope that this thread will help others, too.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Javascript suddenly disabled on front end’ is closed to new replies.