Javascript not working when i turn on concatenation with CodeSleeve asset pipeline (Laravel 4)

Question

I successfully got the Codesleeve Asset Pipeline ( https://github.com/CodeSleeve/asset-pipeline ) requiring all my various javascript and css.

My issue is when I turn on concatenation my javascript completely breaks. I am kinda a noob at js, but I think I have built things pretty sensibly.

Any help would be much appreaciated.

Here are the errors from the console:

(Basically a bunch of things that were defined before are now undefined, not sure why?!)

• Uncaught TypeError: undefined is not a function application.js:19
• Uncaught ReferenceError: Highcharts is not defined exporting.js:22
• Uncaught TypeError: Object [object Object] has no method 'plugin'

Here are my JS files when concat is off:

(everything works fine like this)

<script src="http://mysite.dev/assets/jquery-183.min.js" ></script>
<script src="http://mysite.dev/assets/detail-admin201/bootstrap.min.js" ></script>
<script src="http://mysite.dev/assets/detail-admin201/jquery-ui-1.10.2.custom.min.js" ></script>
<script src="http://mysite.dev/assets/theme.js" ></script>
<script src="http://mysite.dev/assets/datepicker.js" ></script>
<script src="http://mysite.dev/assets/select2.min.js" ></script>
<script src="http://mysite.dev/assets/pnotify.min.js" ></script>
<script src="http://mysite.dev/assets/jquery.watable.js" ></script>
<script src="http://mysite.dev/assets/number.min.js" ></script>
<script src="http://mysite.dev/assets/jquery.my.plugin.js" ></script>
<script src="http://mysite.dev/assets/highcharts.js" ></script>
<script src="http://code.highcharts.com/modules/exporting.js" ></script>
<script>
    var options = {plugins various options i supply blah blah};
    jQuery(function($){
        // Initialize our plugin
        $("#element").plugin(options);
    });
</script>

Let me know if any other info would be useful. Thanks in advance.

Answer 1

When you are turning on concatenation are you also turning on minification? If so minification could be breaking your code.

If you are just switching concatenation on and off, then what is likely happening is that you are including some javascript (likely a 3rd party script) which has a self invoking function without a semi-colon. Essentially the problem shown here .

I have put in a proposal at

https://github.com/CodeSleeve/asset-pipeline/issues/133

to try and prevent this type of thing from happening for you but for right now as a work around you can include your files one by one and figure out which file is the culprit.

More info on pipeline below

Asset pipeline will out of the box behave differently when on production compared to another environment (like local). I have put in a proposal to document some of these pain points and troubleshooting for new comers .

If you are using the most current version then there are two big behavior changes when switching environments:

1. caching - production assets are cached. This means once you load a page you will be stuck with those assets until you do

   $> php artisan assets:clean

   This is why you should set your environment to local when developing.

2. minification - assets are minified on production only. This can cause issues though because the minifiers sometimes break on code. There are some workarounds you can do to fix this. Something I normally do when having issues with a certain file (say Twitter Bootstrap) is use the .min.css extension which is then skipped by the minifier and written out as-is .

Note that this behavior is out of the box and can easily be modified by editing your configuration.

$> php artisan config:publish codesleeve/asset-pipeline

Then edit your file app/config/packages/codesleeve/asset-pipeline/config.php . For more information on these options visit the documentation here .

Hope this helps.