b0ss b0ss - 27 days ago 16
Javascript Question

backboneforce.js:5 Uncaught SyntaxError: Unexpected token <

I'm loading my dependencies with require.js and I'm getting this error:

backboneforce.js:5 Uncaught SyntaxError: Unexpected token <


My Config file:

require.config({
// Require is defined in /scripts, so just the remaining path (and no ext needed)
'baseUrl': 'js/',
'paths': {
"jquery": "libs/jquery",
"underscore": "libs/underscore",
"backbone": "libs/backbone",
"bootstrap": "libs/bootstrap",
"text": "libs/text",
"notify": "libs/notify",
"backboneForce":"libs/backboneforce",
"forceTK":"libs/forcetk/forcetk",
"forceTKUI":"libs/forcetk/forcetkui"
},
'shim': {
bootstrap: {
deps: ['jquery'],
exports: 'Bootstrap'
},

backbone: {
'deps': ['jquery', 'underscore'],
'exports': 'Backbone'
},
underscore: {
'exports': '_'
},
forceTK:{
deps:['jquery'],
exports:'forcetk'
}
}

});

require([

// Load our app module and pass it to our definition function
'app'
], function (App) {
// The "app" dependency is passed in as "App"
App.initialize();
});


and here is my app.js:

define([
'jquery',
'underscore',
'backbone',
'bootstrap',
'backboneForce',
'forceTK',
'forceTKUI',
'notify',
'router/navigationRouter'
], function ($, _, Backbone, bootstrap, bbforce, forcetk, forcetkui, notify, Router) {
var initialize = function () {
Router.initialize();
console.log(bbforce);
}

return {
initialize: initialize
};
});


In my browser network tab, all dependencies are loaded, but I'm getting this error for forceTK, forceTKUI and backboneForce.

Answer

It looks like the path to the backboneforce file is wrong and the server is returning a 404 HTML page.

The following line:

"backboneForce":"libs/backboneforce",

should probably be

"backboneForce":"libs/backboneforce/backboneforce", // or backbone.force

How does require paths work?

Paths inside the paths option are just aliases. If you want to point to a module, you must include the file name without the extension.

If you have the following directory structure:

lib
├───backboneforce
│   └───backbone.force.js

The path should be lib/backboneforce/backbone.force.

Where is the < coming from?

When you make a request with a path to a non-existent file, the server will often return some sort of default 404 error message or it will redirect to a default page (like the home page).

Here's what Stack Overflow returns:

wrong path 404 error

The < comes from <!DOCTYPE html> on the first line of the response, which the browser tries to interpret as JavaScript.