Bigcommerce模具包，无需缩小javascript

Question

I'm having a javascript error in production that I can not duplicate in development. This is the offending module:

import $ from 'jquery';
import 'foundation-sites/js/foundation.core';
import 'foundation-sites/js/foundation.util.mediaQuery';
import 'foundation-sites/js/foundation.util.keyboard';
import 'foundation-sites/js/foundation.util.box';
import 'foundation-sites/js/foundation.util.motion';
import 'foundation-sites/js/foundation.util.triggers';
import 'foundation-sites/js/foundation.dropdown';

export default function() {
  $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
    toggle();
  });

  // toggle on page load
  toggle();
}

function toggle() {
  const $drop = $('[data-more-categories-dropdown]');

  if (Foundation.MediaQuery.atLeast('medium')) {
    if ($drop.data('dropdown')) {
      $drop.foundation('destroy');
      $drop.removeData('dropdown');
      $drop.attr('style', '');
    }
  }
  else {
    if (!$drop.data('dropdown')) {
      new Foundation.Dropdown($drop, {
        closeOnClick: true
      });
    }
  }
}

The purpose of the module is simply to destroy a foundation dropdown menu when the screen breakpoint changes. If the new breakpoint is medium or larger, and the dropdown exists, destroy it. If the breakpoint is smaller than medium and the dropdown does not exist, create it.

This works exactly as desired in my local development version of the store. Then, I run 'stencil bundle', and upload the theme to a live store. When I do that, I get an error every time I resize the browser to a breakpoint of medium or larger. The error is:

bundle.js:4 Uncaught ReferenceError: We're sorry, 'destroy' is not an available method for this element.

This is very difficult to troubleshoot since all of the javascript is minified into the bundle.js file, and I can't reproduce the issue in development.

Is there any way (even a hacky way) to tell the stencil bundle to treat the javascript like it does in development? That way I can leave debugger statements in the code and have source maps to help me figure out why the behavior is different in production.

If anyone has any other ideas as to what might cause this, please let me know.

Answer 1

I have no idea why, but I made a small change to the module and it seems to have fixed the problem. I'm now using the zfPlugin data attribute to check if the dropdown is initiated or not. Here's the new toggle function.

function toggle() {
  const $drop = $('[data-more-categories-dropdown]');

  if (Foundation.MediaQuery.atLeast('medium')) {
    if ($drop.data('zfPlugin')) {
      $drop.foundation('destroy');
      $drop.attr('style', '');
    }
  }
  else {
    if (!$drop.data('zfPlugin')) {
      new Foundation.Dropdown($drop, {
        closeOnClick: true
      });
    }
  }
}