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

Question

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

dev-img4.x.com/m/j/mains/main-article.js
dev-img4.x.com/m/j/views/logged_out.js
dev-img4.x.com/m/j/views/templates/logged_out.html

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>

menzoic menzoic · Accepted Answer · 2013-02-23T00:38:17

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.

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

1 Answers