Module name has not been loaded yet for context using RequireJS text plugin

Question

I'm using text.js to load templates and I'm getting an error on

require('text!templates/categories.html')

the error is

Uncaught Error: Module name "text!templates/categories.html_unnormalized2" has not been loaded yet for context:

Have a look at my view section in the require loading process of the template that's where the error is thrown.

Project directory structure:

js
    /app
        ....
        views/categories
        templates/categories
    /lib
        /jquery
        /underscore
        /backbone
        /text
    /vendor
        /jquery-ui
        /fancytree

RequireJS configs:

require.config({
    // The shim config allows us to configure dependencies for
    // scripts that do not call define() to register a module

    shim: {

        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        'jquery-ui': {
            exports: "$",
            deps: ['jquery']
        },  
        'fancytree': {
            deps: ['jquery-ui']
        }, 

    },
    paths: {
        'jquery': '../lib/jquery/jquery',
        'underscore': '../lib/underscore/underscore',
        'backbone': '../lib/backbone/backbone',     
        'text': '../lib/text/text',
        'jquery-ui': '../vendor/jquery-ui/jquery-ui',
        'fancytree': [      
            '../vendor/fancytree/fancytree',
            '../vendor/fancytree/fancytree.table'
        ],      
    },

    baseUrl: '/js/app',

});

view:

define(['jquery-ui', 'fancytree', 'require'], function(ui, fancytree, require){

    'use strict';

    var $ = require('jquery'),
        _ = require('underscore'),  
        Backbone = require('backbone'),
        tpl = require('text!templates/categories.html') /* this line here produces error loading text.js*/,
        template = _.template(tpl);


    return Backbone.View.extend({
        el: $('#tree'),
        initialize: function() {

            this.listenTo( this.collection, 'reset add change remove', this.render, this );
            this.collection.fetch();
        },
        initFancyTree: function() {
            console.log('tree');
            $('#fancytree').fancytree();

        },
        render: function() {

            console.log(this.collection.toJSON())
            this.$el.html(template());
            //this.initFancyTree();
            return this;
        }
    });
})

Possible duplicate of [Dynamic require in RequireJS, getting "Module name has not been loaded yet for context" error?](http://stackoverflow.com/questions/17446844/dynamic-require-in-requirejs-getting-module-name-has-not-been-loaded-yet-for-c) — Emile Bergeron, Nov 21 '16 at 04:51
Please take the time to read the documentation and to debug your code before asking. [It's not been 15 minutes from the moment you had the problem](http://stackoverflow.com/questions/40712506/error-loading-jquery-ui-in-require-js-config-for-fancytree-plugin#comment68653176_40712532) and the moment you posted the question. — Emile Bergeron, Nov 21 '16 at 05:00

score 2 · Accepted Answer · edited May 23 '17 at 12:17

You're trying to require modules using CommonJS syntax which RequireJS tries to emulate by loading the template asynchronously.

Since it's not ready yet when you try to use it, it throws the error.

You'd only need the following to get it to work:

define([
    'jquery', 'underscore', 'backbone', 'jquery-ui', 'fancytree',
    'text!templates/categories.html'
], function(
    $, _, Backbone, ui, fancytree, 
    tpl
) {
    'use strict';
    return Backbone.View.extend({
        el: $('#tree'),
        template: _.template(tpl), // can be put here directly
        initialize: function() {
            // only has 3 parameters
            this.listenTo(this.collection, 'reset add change remove', this.render);
            this.collection.fetch();
        },
        render: function() {
            this.$el.html(this.template());
            return this;
        }
    });

});

Additional information (and similar questions):

Module name has not been loaded yet for context using RequireJS text plugin

1 Answers1