jquery - velocity.ui intermittently fails with the error "Velocity UI Pack: velocity must be loaded first." -


when load velocity.ui, intermittent error on console:

velocity ui pack: velocity must loaded first. aborting.

and none of velocity.ui's animations available.

i can reproduce issue simple this:

<script> require.config({   baseurl: "/static/lib/",   paths: {     jquery: "external/jquery",     velocity: "external/velocity/velocity.min",     "velocity.ui": "external/velocity/velocity.ui.min",   } });  require(["jquery", "velocity.ui"]); </script>

when @ network requests, see velocity has loaded before velocity.ui. , velocity.ui have define(["velocity"], ....

solution

if project uses jquery at all, reason, must make velocity dependent on jquery module. otherwise, you'll run problem ran into. create module called velocity-glue:

define(['velocity', 'jquery'], function (velocity) {   return velocity; });

modify configuration contains these 2 entries.

map: {   "*": {     velocity: "velocity-glue",   },   "velocity-glue": {     velocity: "velocity",   }, }

the first entry makes velocity-glue used whenever velocity required. second entry makes sure velocity-glue can original velocity.

explanation

i'm going use "velocity" refer product globally: includes both modules (velocity , velocity-ui).

the problem velocity not amd citizen. this, mean modules depend on globals , export globals, even when loaded through amd loader, bad behavior amd modules.

velocity can used or without jquery. when velocity used without jquery, uses kind of minimal polyfill provides of jquery's functions velocity needs. since velocity can used or without jquery, modules not not list jquery in dependencies when call define, otherwise, require use jquery.

whether or not velocity loaded amd module, installs accessible velocity property on 1 of these if existr: window.jquery window.zepto, or window. velocity use first 1 can use in order given here. if neither jquery nor zepto installed, accessible window.velocity. if jquery installed, accessible window.jquery.velocity. problem both velocity , velocity.ui perform computation choosing between 3 possible locations independently. let's consider scenarios:

scenario a:

  1. jquery loads.
  2. velocity installs window.jquery.velocity.
  3. velocity.ui looks window.jquery.velocity. fine.

scenario b:

[jquery not loaded yet.]

  1. velocity installs window.velocity.
  2. velocity.ui looks window.velocity. fine.

(jquery may or may not load later. not matter.)

scenario c:

  1. velocity installs window.velocity because jquery not loaded.
  2. jquery loads.
  3. velocity.ui looks window.jquery.velocity because window.jquery exist, window.jquery.velocity not exist! you error.

note in scenarios above velocity always load before velocity.ui because velocity.ui lists velocity dependency. however, loading order of jquery relative 2 other modules not constrained because (as mentioned) not depend on jquery.

the solution i've given in first section answer fixes issue constraining load order: jquery load before both modules.


Comments

Post a Comment