Hi,

So, I thought I would try the 'Combine CSS files by using media queries' option in the Configuration section. The help text on that item says 'Use cores grouping logic needs to be unchecked in order for this to work.' So, I've turned that off which now breaks javascript and I'm getting errors in the console stating 'Uncaught ReferenceError: MQ is not defined (anonymous function)'. I'm noticing this happens regardless of whether the 'Combine CSS files by using media queries' option is checked or not. You should be able to reproduce the errors simply by unchecking the 'Use cores grouping logic' option.

Furthermore, if you have both options turned on, from a cursory glance, it doesn't look like it causes any problems (contrary to the help text warning). I'm wondering if the help text is just incorrect and that the 'Use cores grouping logic' should just always be on.

Anyway, I wanted to bring this to your attention.

Erik.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

erikhopp’s picture

It looks like this undefined MQ issue comes from the media_queries.js file in the Adaptive Theme subtheme. The MQ variable is produced in the at_core/scripts/onmediaquery.js file so, perhaps turning off the 'Use core grouping logic' option is somehow excluding that file?

mikeytown2’s picture

Thanks for pointing me in the right direction :)

mikeytown2’s picture

mikeytown2’s picture

I've added in debug mode #1996802: have advagg-debug=1 output debug info to watchdog
If i could get the output from watchdog that would be helpful.
path/to/bug?advagg-debug=1

mikeytown2’s picture

Title: Javascript error: "Uncaught ReferenceError: MQ is not defined" when unchecking 'Use cores grouping logic' » Javascript error: "Uncaught ReferenceError: MQ is not defined" when unchecking 'Use cores grouping logic' (Adaptive Theme)
mikeytown2’s picture

Component: Code » CSS/JS
mikeytown2’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

erikhopp’s picture

Version: 7.x-2.x-dev » 7.x-2.3
Issue summary: View changes
Status: Closed (fixed) » Active

Hi,

It took me a while to get back in investigating this, but I have and I'm still seeing largely the same issue - but some of the details are a bit different - and I think I've figured out a potential cause.

I'm still seeing the following error in console: 'Uncaught ReferenceError: MQ is not defined' (in media_queries.js - in my AdaptiveTheme subtheme) and I'm also seeing 'Uncaught ReferenceError: jQuery is not defined' in the Highcharts module /js/highcharts.js file (7.x-2.x-dev version) - which is breaking Highcharts. But it is no longer breaking javascript functionality completely.

I'm noticing that, for both of these files, they are designated to be loaded in the footer of the document (scope = 'footer') and when I switch them to the header, the errors go away. In the debugging export, it is looking like the 'footer' grouping is loading before the 'header' grouping of js files (perhaps it is loading alphabetically?) - which may be causing problems when variables required for the files that are to be loaded in the footer are not yet defined.

Hopefully my investigative work is helpful. I'd appreciate hearing what you think about this.

Thanks!

Erik.

erikhopp’s picture

Title: Javascript error: "Uncaught ReferenceError: MQ is not defined" when unchecking 'Use cores grouping logic' (Adaptive Theme) » Javascript errors when JS files are scoped to load in the footer and expected required variables to be defined earlier

Retitling to reflect latest debugging clues.

erikhopp’s picture

Title: Javascript errors when JS files are scoped to load in the footer and expected required variables to be defined earlier » Javascript errors when JS files are scoped to load in the footer and expect required variables to be defined earlier

Grammar.

mikeytown2’s picture

In terms of highcharts do you have this file sites/all/libraries/highcharts/js/highcharts.js where highcharts.js is version 2.3.5? Example file as highcharts.com only lists the 3.x branch for download: http://cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js

The readme doesn't explain that you need to copy the 2.3.5 version into that directory. Once I did this the JS errors went away.

I can't repo the footer loading before the header, I'll try out AdaptiveTheme to see if I can repo this.

mikeytown2’s picture

Status: Active » Postponed (maintainer needs more info)

Using AdaptiveTheme base subtheme 7.x-3.1 and turning "Responsive JavaScript beta" under Polyfills on admin/appearance/settings/adaptivetheme_subtheme I can't get the MQ is not defined error to happen.

I need more details on how to repo the reported bug.

erikhopp’s picture

Hi mikeytown2,

I do indeed have a highcharts library loading, but I'm using a later version - 3.0.7.

I'm not sure what to say other than that when javascript files seem to be scoped to load in the footer, there are JS errors showing up when it appears that they *think* the header JS files are loading first and require variables like jQuery and MQ to be set already - but are not because it looks like the JS files scoped for the footer are loading before ones scoped for the header.

The following code changes fixed the two issues cited above and now produce no errors when AdvAgg is enabled:

Highcharts

--- www/sites/all/modules/highcharts/highcharts.module (saved version)
+++ (current document)
@@ -48,7 +48,7 @@
     'version' => '7.x-2.x',
     'js' => array(
       drupal_get_path('module', 'highcharts') . '/js/highcharts.js' => array(
-        'scope' => 'footer',
+        'scope' => 'header',
       ),
     ),
   ) + $dependency;

And the AT theme file

--- www/sites/all/themes/adaptivetheme/at_core/inc/preprocess.inc (saved version)
+++ (current document)
@@ -79,7 +79,7 @@
 
   // Load specific subtheme scripts
   if (at_get_setting('load_onmediaqueryjs', $theme_name) === 1) {
-    load_subtheme_script('scripts/media_queries.js', $theme_name, 'footer', '100');
+    load_subtheme_script('scripts/media_queries.js', $theme_name, 'header', '100');
   }
 
   // Build an array of polyfilling scripts

Does that help?

Erik

mikeytown2’s picture

If you go to admin/config/development/performance/advagg/info and under the Hooks And Variables Used In Hash section what is listed in there?

erikhopp’s picture

Array
(
    [variables] => Array
        (
            [advagg_gzip] => 1
            [is_https] => 1
            [advagg_global_counter] => 0
            [base_path] => /
            [advagg_ie_css_selector_limiter] => 0
            [advagg_scripts_scope_anywhere] => 
            [css_emimage_inline_datauri_limit] => 4096
            [css_emimage_mode] => orginal
            [css_emimage_files] => 1
        )

    [hooks] => Array
        (
            [advagg_get_css_file_contents_alter] => Array
                (
                )

            [advagg_get_css_aggregate_contents_alter] => Array
                (
                    [0] => css_emimage
                )

            [advagg_get_js_file_contents_alter] => Array
                (
                )

            [advagg_get_js_aggregate_contents_alter] => Array
                (
                )

            [advagg_save_aggregate_alter] => Array
                (
                    [0] => advagg
                )

            [advagg_current_hooks_hash_array_alter] => Array
                (
                    [0] => css_emimage
                )

            [advagg_get_root_files_dir_alter] => Array
                (
                )

            [advagg_context_alter] => Array
                (
                    [0] => advagg
                )

        )

)
mikeytown2’s picture

On that same page what is listed under "Modules implementing AdvAgg CSS/JS hooks"?

erikhopp’s picture

advagg: 5
  advagg_build_aggregate_plans_alter
  advagg_context_alter
  advagg_save_aggregate_alter
  css_alter
  js_alter
conditional_fields: 1
  js_alter
css_emimage: 5
  advagg_build_aggregate_plans_alter
  advagg_changed_files
  advagg_css_groups_alter
  advagg_current_hooks_hash_array_alter
  advagg_get_css_aggregate_contents_alter
jqmulti: 1
  js_alter
labjs: 3
  advagg_js_groups_alter
  advagg_modify_js_pre_render_alter
  js_alter
logintoboggan: 1
  js_alter
not in use: 5
  advagg_get_css_file_contents_alter
  advagg_get_js_aggregate_contents_alter
  advagg_get_js_file_contents_alter
  advagg_get_root_files_dir_alter
  advagg_modify_css_pre_render_alter
speedy: 1
  js_alter
mikeytown2’s picture

Title: Javascript errors when JS files are scoped to load in the footer and expect required variables to be defined earlier » AdvAgg & LABjs: Javascript errors when JS files are scoped to load in the footer and expect required variables to be defined earlier
Status: Postponed (maintainer needs more info) » Active

After installing labjs I am able to repo the reported issue with "MQ is not defined".

mikeytown2’s picture

Looks like LABjs is not wrapping the footer code in labjs markup. Will debug.

mikeytown2’s picture

Looks like a change in this #2122237: Compatibility problem with Media module's media browser popup broke LABjs. Issue is the header JS gets processed last instead of first (advagg follows what core does now). It appears that I'll have to roll a patch for LABjs in order to fix this. Will move this issue over there once I have the patch ready to go.

erikhopp’s picture

Awesome. Thanks a bunch!

mikeytown2’s picture

The following patch has been committed to AdvAgg's mod submodule. Up next is a patch for LABjs.

mikeytown2’s picture

Project: Advanced CSS/JS Aggregation » LABjs
Version: 7.x-2.3 » 7.x-1.x-dev
Component: CSS/JS » Code
Status: Active » Needs review
FileSize
2.68 KB
erikhopp’s picture

Status: Needs review » Reviewed & tested by the community

The patches seem to fix the issue. Console is free of errors! Thanks! Erik.

erikhopp’s picture

Hi! I just wanted to give this a push and remind that the current patch fixes the bug and is ready to be committed, in my opinion. Erik.

btopro’s picture

property had a misspelling. What was committed to advagg said the property is called movable and the original patch was calling for moveable. I'm experiencing wonkiness in advagg but I can't pinpoint what yet (it does appear related to this module though).

jcisio’s picture

Status: Reviewed & tested by the community » Fixed

It was renamed to movable in http://cgit.drupalcode.org/advagg/commit/advagg_mod/advagg_mod.module?id....

Thanks for the patch. Committed and pushed.

  • jcisio committed 8b1fda5 on 7.x-1.x authored by mikeytown2
    Issue #1990358 by mikeytown2, btopro | erikhopp: Fixed AdvAgg...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.