requirejsrequirejs-text

RequireJS text plugin adding '.js' to file name but on same domain

I have an optimized RequireJS setup using the text plugin. I seem to be running into the '.js' filename being added to my module. I'm looking at this in Firefox 17.

I read this entry, but I am pretty sure all my files are on the same domain. Why is requirejs trying to append a '.js' to .jst template files that are loaded with the !text plugin?

My files are on located on

The text plugin tries to look for dev-img4.x.com/m/j/views/templates/logged_out.html.js, which doesn't make sense to me, since it looks like all my dependencies are on the same domain. I'm not sure how the text plugin thinks there is a cross-domain issue.

main-article.js

    require.config({
        baseUrl: 'dev.x.com/m/j',
        paths: {
            'jquery': 'dev.x.com/m/j/lib/jquery',
            'backbone': 'dev.x.com/m/j/lib/backbone',
            'underscore': 'dev.x.com/m/j/lib/underscore',
            'text': 'dev.x.com/m/j/lib/text'
        },
        shim: {
            'underscore': {
                exports: '_'
            },
            'backbone': {
                deps: ['jquery', 'underscore'],
                exports: 'Backbone'
            }
        },
        urlArgs: 'buildlife=1',
        waitSeconds: 15
    });

    require(['jquery', 'modules/site', 'underscore', 'backbone', 'views/logged_out'], function($, site, _, Backbone, loggedOutView) {
            //This function will be called when all the dependencies
            //listed above are loaded. Note that this function could
            //be called before the page is loaded.
            //This callback is optional.

            var loggedOutBar = new loggedOutView();

            /* Initialize code */
            $(document).ready(function() {
                /* sitewide code */
                site.init();

                $('.rslogo').after(loggedOutBar.render());
            });
        }
    );

logged_out.js

    define(['module', 'jquery', 'underscore', 'backbone', 'text!views/templates/logged_out.html'], function(module, $, _, Backbone, loggedOutTemplate) {
        /* Create a view of the logged out bar */

        var loggedOutView = Backbone.View.extend({
            className: 'loginbar',
            initialize: function() {

            },
            template: _.template(loggedOutTemplate),
            render: function() {

                this.$el.html(this.template);

                return this; /* Allow method chaining after render */
            }
        });

        return loggedOutView;
    });

logged_out.html

 <a href="#" class="signin">Sign In</a> | <a href="#" class="signup">Sign Up</a>
Solution

  • Use relative urls, all you need is

    baseUrl: '/j/'

    Then for every js file in your config you just need to resume from the baseUrl

    jquery: lib/jquery

    This will prevent any cross domain issues you might have if you were to use require on a subdomain of dev.x

    Also if you're visiting www.dev.x (a subdomain of dev.x), this might be causing the issue where the '.js' is being appended. This issue has been found by user 'liorix' in this previous post: https://stackoverflow.com/a/10618426/404097

    Making your baseUrl relative will solve your problems if this is the issue.