JavaScript errors due to wrong resource loading order

Symptoms: JavaScript errors occurs when you turned on optimization (e.g. “jsf is not defined”, “jQuery is not defined”)

Indication: open the development tools and look to error console - you will see JavaScript errors there.

Problem: Packaged resource (packed.js) depends on jsf.js and jquery.js. When you accidently request loading of resource, which is packaged in packed.js before the jsf.js or jquery.js are requested, you are getting conflict. These issues may come up when you are using external library or when you manually request some resources like jquery.js.

Fix: Use <h:outputScript name=”javax.faces:jsf.js” /> and <h:outputScript name=”jquery.js” /> in the header.