Marionette.js Require.js Template Path Error

Question

I have the following directory structure to my tpl:

-src
    -assets
        -js
            -lib
                [files]
            -src
                -templates
                    -common
                        builder_regions.tpl

My require.config is:

require.config({
    baseUrl:'src/assets/js',
    paths: {
        backbone:               'lib/backbone',
        jquery:                 'lib/jquery.min',
        'jquery-ui':            'lib/jquery-ui-1.10.4.custom.min',
        underscore:             'lib/underscore.min',
        modernizr:              'lib/modernizr.min',
        'magnific-popup':       'lib/magnific-popup.min',
        text:                   'src/assets/jslib/text',
        marionette:             'lib/backbone.marionette.min',
        tpl:                    'lib/underscore-tpl'
    },
    shim: {
        jquery: {
            exports:            '$'
        },
        underscore: {
            exports:            '_'
        },
        backbone: {
            deps:               [ 'jquery', 'underscore' ],
            exports:            'Backbone'
        },
        marionette: {
            deps:               [ 'jquery', 'underscore', 'backbone' ],
            exports:            'Marionette'
        },
        'jquery-ui': {
            deps:               [ 'jquery' ],
            exports:            '$ui'
        },
        'magnific-popup': {
            deps:               [ 'jquery' ],
            exports:            'magnificPopup'
        },
        tpl:                    [ 'text' ]
    }
});

My require module is set-up as:

define([ 'tpl!src/templates/common/builder_regions.tpl', function( Marionette, layoutTpl ) {
    console.log( 'did not throw' );
});

When I access the module I get the following error:

GET http://localhost:3000/src/assets/js/src/tpl.js 404 (Not Found)

Why is file tpl.js being referenced when I provided the path in require.config? Thanks!

Answer 1

If your underscore-tpl.js is this one then you do not need a shim configuration for it because it calls define by itself. If you use a shim configuration for something that does not need a shim, RequireJS can behave strangely.

Another thing not related to the problem you are reporting here but could give you trouble down the line: jQuery has not needed a shim since at least version 1.9. So if you use a version that is >= 1.9, you should remove the shim you have for jquery.

Answer 2

Try This:

 define(['marionette', 'tpl!src/templates/common/builder_regions.tpl'], function( Marionette, layoutTpl ) {
        console.log( 'did not throw' );
    });