Cannot debug JS on production (no console output)

[matteo_maria_ambrogi]

hello,

I have just deployed a sage 9 theme, but things are weird.

in the same page part of JS code are working, and part not.
trying to debug, but console.log are hidden, or in any case, it seems that part of code is not processed…

any idea on how to debug?

[strarsis]

There are no JavaScript errors in the console?
Is this a production or a development build?

[matteo_maria_ambrogi]

no error.
is a prod build

take a look: Atravisio.com

in home.js, somethng works, something not…

[matteo_maria_ambrogi]

I think I found the issue: it may that JQUERY is not being loaded correctly?

I tryed to inject a in a page and $ is undefined…
then checked anything and what it is working is anything not jquery related…
GSAP for example, or splitting, are working fine…

[strarsis]

Have you declared jquery a dependency of your main theme script? If not, WordPress won’t enqueue it or in the wrong order (with traditional script elements).

[matteo_maria_ambrogi]

should be

but the weird thing is it’s not working in some pages…

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
    wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);

    global $template;
    $page = explode('.', basename($template));

    $wp = array(
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'security' => \App\Ajax::getNonce(),
        'homeUrl' => get_option('home'),
        'postsPerPage' => get_option('posts_per_page'),
        'permalink' => get_permalink(),
        'templateUri' => get_template_directory_uri(),
        'template' => $page[0],
        'lang' => defined('ICL_LANGUAGE_CODE') ? ICL_LANGUAGE_CODE : false,
        'isMobile' => App::getMobileDetect()->isMobile(),
        'isLoggedIn' => is_user_logged_in()
    );

    wp_localize_script('sage/main.js', 'wp', $wp);

    if (is_single() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }
}, 100);

[strarsis]

On the affected pages, can you find JavaScript variables like postsPerPage?

[matteo_maria_ambrogi]

@strarsis

postsPerPage

yup.

how can it be possible that locally anything works fine?

[strarsis]

You are using Trellis Vagrant locally?
A staging server could be a good idea.
Set up a VM that resembles the production system as closely as practically possible (including the usage of htaccess and workarounds for the limitations of shared hosting).
Then you can upload your site, plugins, theme onto it and probably observe the same issues.

[matteo_maria_ambrogi]

nope, no trellis.

I have a custom environment on nginx unfortunately.
did’t know I could have met such kind of problems with sage
even on a shared hosting

[strarsis]

Well, shared hosting has its own limitations and issues, also with non-Bedrock/-Sage/WordPress sites.

So how does the main theme script decide when to execute what code? Are you using the built-in Sage 9 router that uses the body classes for this?

What exactly is not launched on the pages? I opened some and on first glance it appears that it runs?

[matteo_maria_ambrogi]

Than you very much for the patience: since I was on a delivery I had to change broken JS with a CSS fallback which, luckily seems to work fine according to you

it was a basic JS to force font height to fulfill the screen height, not rocket science
BUT: simply was not doing its job.

you know another discrepancy upon building?

css cursor: url('building-with-png') generates a building error!
(but yarn start, works like a charm)

/*function isLandscape(someImg) {
      if (someImg.width() > someImg.height()){
        return true;
      } else if (someImg.width() < someImg.height()){
        return false;
      } else {
        return true;
      }
    }


let sectionHeight = $(".section.cover").height()
    let title = $('.section.cover h1')
    let results = Splitting({ target: title, by: 'words' });
    let fz = 0
    var lh = 0

    if(isLandscape($(window))) {
      fz = Math.round( sectionHeight * 4) + 'px'
      lh = Math.round( sectionHeight * 4.2) + 'px'
      console.log(f)
    }
    else {
      fz = Math.round( sectionHeight / 8) + 'px'
      lh = Math.round( sectionHeight / 7.5) + 'px'
    }

    $(results).each(function (){
      $(this).css({
        "font-size": fz,
        "line-height": lh,
      })
    })*/