Getting a 404 despite having the right path, why?

[antonioOrtiz]

The following setup gets a jQuery plugin mixitup working perfectly.

"browser": {
        "mixitup": "./app/bower_components/mixitup/src/jquery.mixitup.js",
        "jquerymustache": "./app/bower_components/jquery-Mustache/src/jquery.mustache.js"
    },
    "browserify": {
        "transform": [
            "browserify-shim"
        ]
    },
    "browserify-shim": {
        "mixitup": {
            "exports": "mixitup",
            "depends": [
                "jquery:jQuery"
            ]
        },
        "jquerymustache": {
            "exports": "Jquerymustache",
            "depends": [
                "jquery:jQuery",
                "mustache:mustache"
            ]
        }
    },

However, when I try to apply the same convention to jquery-Mustache, I am not able to get my templates fetch:

 "browser": {
   "jquerymustache": "./app/bower_components/jquery-Mustache/src/jquery.mustache.js"
  }

and

"jquerymustache": {
      "exports": "Jquerymustache",
      "depends": [
        "jquery:jQuery",
        "mustache:mustache"
      ]
    }

I don't get an error from the terminal, (that would prove the package.json setup is kosher) but I do get this error from the console:

Which points to this:

This is my app.js file, feel this is the most relevant information:

var $ = jQuery = require('jquery');
var mixitup = require('mixitup');
var Jquerymustache = require('jquerymustache');
var mustache = require('mustache');

And the function which is fetching the template.

function templateLoader(e) {
        var doc = document,
            event = EventUtility.getEvent(e),
            target = EventUtility.getTarget(event);
        $.Mustache.options.warnOnMissingTemplates = true;

        $.Mustache.load('templates/index.html')
            .fail(function() {
                $('#overlay').append('Failed to load templates from <code>templates.htm</code>');
            })
            .done(function() {
                var output = $('#overlay');
                $('body').mustache('templateID');
            });
    }

And the file path for good measure, to prove the path in the function is correct:

[jonnyreeves]

Hey @antonioOrtiz, sorry to hear you are having issues.

The console error message you attached, and source code that you pasted shows that the templates are being loaded from templates/index.html (via: $.Mustache.load('templates/index.html')).

However, the directory tree screenshot you posted show that your templates reside in public/js/templates/index.html; could you try modifying your code to load them from there instead:

$.Mustache.load('js/templates/index.html')

[antonioOrtiz]

Hey Jonny! Thanks for your help! I tried $.Mustache.load('js/templates/index.html') but that didn't work. However, just as a test, I put the template in the same directory (app.js and index.html live in the same directory, js in this case), that didn't work either. But in the console, strangely I get a messsage indicating it's ok. (The load request)

Yet as you can see there is no template in the DOM...

This is the template markup, that's the only thing I can think of is wrong,

<script id="templateID" type="text/html">
<div id="overlay">
    <div id="container" class="container">
        <div class="row">
            <div class="twelve columns">
               <div class="modal-container">
                    <div id="modal" class="modal-animation">
                        <p>Bitters pop-up authentic actually, next level fashion axe ethical lomo cold-pressed.  Pickled Wes Anderson +1 retro squid, chia cray umami cred dreamcatcher selfies.
                        <a id="appButton" class="button button-primary modal-button">lets get started!</a>
                        </p>
                    </div>
               </div>
            </div>
        </div>
    </div>
</div>

but now I feel I am grasping at straws. Do you think it's cause I am using browserify-shim. I have talked to guys who made browserify-shim at they don't think it is, as I am not getting errors regarding bs. I ask because I am using jquery-Mustache in another project at it works perfectly?

https://github.com/antonioOrtiz/accessibility_project

[antonioOrtiz]

Hey Jonny,

I also went back and tried to implement a simpler instance, based on your examples:

jQuery(document).ready(function($) {

function templateLoader() {
    $.Mustache.load('single-template.html')
        .done(function() {
            var output = $('body');
            output.append($.Mustache.render('single-template', {
                name: "Dave"
            }));
        });

}
var flimFlam = document.getElementById('Container');
EventUtility.addHandler(flimFlam, 'click', templateLoader);

});

And that didn't work... I also checked the app.js file to see the if the jquery-Mustache.js and mustache.js and being distilled in there (they are). I wonder if it's a jQuery name spacing/alias issue?

Also I noticed you had a TUT for require js, you think my browserify-shim needs fixing?

"main": "./app/_js/app.js",
"browser": {
    "mixitup": "./app/bower_components/mixitup/src/jquery.mixitup.js",
    "jquerymustache": "./app/bower_components/jquery-Mustache/jquery.mustache.js"
},
"browserify": {
    "transform": [
        "browserify-shim"
    ]
},
"browserify-shim": {
    "mixitup": {
        "exports": "mixitup",
        "depends": [
            "jquery:jQuery"
        ]
    },
    "jquerymustache": {
        "depends": [
            "jquery:jQuery",
            "mustache:mustache"
        ]
    }
},

And this is how I am requiring them:

var $ = jQuery = require('jquery');
var mixitup = require('mixitup');
var Mustache = require('jquerymustache');
var mustache = require('mustache');

And this is the concatenated app.js file that gets spit out to the public/js app

Thanks so much!!!