require.js text plugin adds ".js" to the file name

Question

I'm trying to work with requirejs and text plugin and I have weird problem.

I have two web servers:

1. localhost:3000 - act as CDN and has all the static files: js, images, css and templates
2. localhost:3001 - server - act as REST server and serve only one file, the main.html file

The main.html file loads all the js files from the second server using the following line:

<script data-main="http://localhost:3000/js/main" 
        src="http://localhost:3000/lib/require-jquery.js"></script>

For some reason, when using the requirejs text plugin, he adds to the templates ".js" suffix when navigating to localhost:3001

I'm using the following syntax:

define ['jquery','backbone','underscore','models/model','text!templates/main.html', 
        'views/navigation', 'views/player', 'views/content', 'views/header']

when I navigate to localhost:3000 it works fine.

Can you think of any reason that the text plugin would have problems serving text files from a remote server (for example, CDN server)?

Answer 1

The documentation of the text plugin gives a hint to the solution: It's possible to configure the plugin in a way that it always fetches remote resources via XHR without appending the .js suffix and loading it via script tag. The simple solution is to always enforce using XHR:

requirejs.config({
   config: {
      text: {
         useXhr: function (url, protocol, hostname, port) {
            return true;
         }
      }
   }
});

Note that the remote server needs to set the correct CORS header and that this could be a security issue. Thus add the necessary checks for trusted urls when using this instead of simply returning true.

Answer 2

I've had trouble with the text plugin when working across domains and perhaps your two localhost servers are hitting this too.

In the web inspector I saw that require.js was trying to fetch things like some-content.html.js instead of some-content.html.

Are you running this code in development mode or building into a production set? When you bundle everything up the text plugin shouldn't have this same cross-domain trouble.

Here's the API documentation part that tipped me off (from http://requirejs.org/docs/api.html):

The baseUrl can be a URL on a different domain as the page that will load require.js. RequireJS script loading works across domains. The only restriction is on text content loaded by text! plugins: those paths should be on the same domain as the page, at least during development. The optimization tool will inline text! plugin resources so after using the optimization tool, you can use resources that reference text! plugin resources from another domain.

Here's an article that helped me work around this for browsers that support CORS: