I'm trying to migrate an application from Backbone to Marionette (v3), but I got stuck in a point for two days already.
When I try to run the app in browser, this error shows up in the console (and the screen is blank):
Uncaught SyntaxError: Unexpected token import in backbone.radio.js:1
First line in backbone.radio.js is the import statement for underscore:
import _ from 'underscore';
I use Requirejs as a module loader. This is the configuration in main.js:
require.config({
paths: {
jquery: '../bower_components/jquery/dist/jquery',
underscore: '../bower_components/underscore/underscore',
backbone: '../bower_components/backbone/backbone',
'backbone.radio': '../bower_components/backbone.radio/build/backbone.radio',
'backbone.babysitter': '../bower_components/backbone.babysitter/src/build/backbone.babysitter',
marionette: '../bower_components/marionette/lib/backbone.marionette',
bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
text: '../bower_components/requirejs-plugins/lib/text'
},
map: {
'*': {
'backbone.wreqr': 'backbone.radio'
}
},
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: [ 'underscore', 'jquery' ],
exports: 'Backbone'
},
marionette: {
deps: [ 'jquery', 'underscore', 'backbone' ],
exports: 'Marionette'
},
bootstrap: {
deps: [ 'jquery' ]
}
}
})
require(['appinstance'], function (app) {
app.start()
})
This is my appinstance.js:
define(function (require) {
var App = require('app')
return new App()
})
And this is my app.js file:
define(function (require) {
var $ = require('jquery')
var _ = require('underscore')
var Backbone = require('backbone')
var Router = require('router')
var Controller = require('controller')
var Marionette = require('marionette')
var CommonHeaderView = require('views/common/header')
return Marionette.Application.extend({
/**
* Define the regions for the application.
*
* #returns {Object}
*/
regions: function () {
return {
header: '#header'
}
},
/**
*
* #param {Object} options
*/
start: function (options) {
var commonHeaderView = new CommonHeaderView()
Marionette.Application.prototype.start.apply(this, [options])
this.header.show(commonHeaderView)
this.Router = new Router({ controller: new Controller() })
Backbone.history.start()
}
})
})
Does anyone know why I'm having this problem?
Unfortunately I ran out of ideas on how to solve this, any help will be greatly appreciated.
P.S.: I use Marionette v3.0.0, Backbone v1.2.3 and Requirejs v2.1.15
That it complains about an import-statement is an indication that you are referencing a source file. Make sure your backbone.radio-path goes to the build file.
Related
I want to create Backbone.js app with Require.js.
But I have an error in console: Uncaught Error: Module name "underscore" has not been loaded yet for context: _. Use require([])
require.config({
baseUrl: 'js/',
paths : {
'jquery' : 'jquery',
'underscore' : 'underscore',
'backbone' : 'backbone',
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
}
});
define('app', ['jquery','backbone', 'underscore'], function ($, Backbone, _){
var Model = Backbone.model.extend({});
var model = new Model;
});
require(['app','jquery', 'backbone', 'underscore']);
How I can resolve this problem?
You still need to list underscore as a part of paths so you can refer to it in the shims. Also, not sure what your directory structure looks like, but I'm writing this with the assumption that library code is in the /js/libs directory). Finally, note you won't need to require any of the dependencies of app -- the joy of RequireJS is that it'll figure out what to load.
So...
require.config({
baseUrl: 'js/',
paths : {
'jquery' : 'lib/jquery',
'underscore' : 'lib/underscore',
'backbone' : 'lib/backbone',
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
define('app', ['jquery','backbone', 'underscore'], function ($, Backbone, _){
var Model = Backbone.Model.extend({});
var model = new Model({
foo: 'bar'
});
var app = {
model: model
};
// ...
return app;
});
require(['app'], function(App) {
App.model.get('foo'); // <<=== returns 'bar'
});
The shim is mentioned inside the paths object. I am not sure if that is the problem, but wanted to mention that here.
You need Underscore.js as listed in your require statement.
The error points to the backbone.js:219 library. The error is thrown in my main.js file in the require(['app'], function.
main.js file:
require.config({
baseUrl: 'scripts',
paths: {
app: '../app',
jquery: 'jquery',
underscore: 'underscore',
backbone: 'backbone',
router: '../router'
},
shim: {
backbone: {
deps: ['jquery','underscore'],
exports: 'Backbone'
}
}
});
require(['app'], function (App) {
App.initialize();
});
My app.js file:
define([
'jquery',
'underscore',
'backbone',
'router' // Request router.js
], function($, _, Backbone, Router){
var initialize = function(){
// Pass in our Router module and call it's initialize function
Router.initialize();
};
return {
initialize: initialize
};
});
My router.js file:
define(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) {
'use strict';
// Router
var AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
list:function () {
// ...
},
wineDetails:function (id) {
// ...
}
});
var initialize = function(){
var app_router = new AppRouter;
Backbone.history.start();
};
return {
initialize: initialize
};
});
This question seems to similar to this one, but none of the suggestions worked for me.
There are two mistake in router.js.
use the "define" replace "require";
return object must contain "initialize" method;
The code like this,
define(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) {
'use strict';
// Router
var AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
list:function () {
// ...
},
wineDetails:function (id) {
// ...
}
});
var initialize = function(){
var app_router = new AppRouter;
Backbone.history.start();
}
return {
initialize: initialize
};
});
ummmm
require.config({
baseUrl: 'scripts',
paths: {
app: '../app',
jquery: 'jquery', //does this actually point to a jquery source file?
underscore: 'underscore', //does this actually point to a underscore source file?
backbone: 'backbone', //does this actually point to a backbone source file?
router: '../router'
},
shim: {
backbone: {
deps: ['jquery','underscore'],
exports: 'Backbone'
}
}
});
require(['app'], function (App) {
App.initialize();
});
my first guess is that at some point RequireJS needs to find out where the src/executables are for jQuery, Backbone, Underscore, etc.
I've started a new backbone, marionette and require project using version 2.2 (i previously worked with 1.8) It seems a lot has changed. I'm getting an error when the browser loads marionette:
Uncaught TypeError: Cannot read property 'ChildViewContainer' of undefined
This is my main.js file:
require.config({
baseURL: 'scripts',
paths: {
"jquery": "lib/jquery",
"underscore": "lib/underscore",
"backbone": "lib/backbone",
"marionette": 'lib/backbone.marionette',
"templates": "../templates",
"text": "lib/text"
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
marionette: {
deps: ['jquery', 'underscore', 'backbone'],
exports: 'Marionette'
},
waitSeconds: 15
}
});
require([ "app", "marionette"], function(App, marionette) {
App.start();
});
And this is my app.js file:
define(["marionette", "router"], function (Marionette, AppRouter) {
var MyApp = Marionette.Application.extend({
initialize: function(options) {
console.log("options.container");
}
});
var MyApp = new MyApp({container: '#page'});
MyApp.addInitializer(function (options) {
MyApp.Router = new AppRouter();
Backbone.history.start();
});
// export the app from this module
return MyApp;
});
Just look at your backbone.js file. It's empty. Download backbone.js from http://backbonejs.org/ and replace it.
I just ran into this same issue myself. The issue was multiple instances of Marionette being included on the page. (i had errantly placed a script tag for marionette on the page from cdnjs, as well as trying to include the static file locally via require). removing the reference to the external JS file helped me...
I'm trying to use require.js for the first time, however I'm getting the error:
Uncaught TypeError: Property '$' of object # is not a function.
require.config({
shim: {
"jquery": {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
},
paths: {
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min',
backbone: '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min',
templates: '/referralgenie/templates/'
}
});
require([
'app'
], function(App){
App.initialize();
});
It states the error is in backbone.js so I'm finding it hard to debug.
The error comes from the line here:
Backbone.history.start();
In my Router file:
// Filename: router.js
define([
'jquery',
'underscore',
'backbone',
'views/CampaginView',
'views/RewardView',
'views/FriendRewardView',
'views/ParticipantView'
], function($, _, Backbone, CampaginView, RewardView, FriendRewardView, ParticipantView) {
var AppRouter = Backbone.Router.extend({
routes: {
':id': 'portal-home' // matches http://example.com/#anything-here
}
});
var initialize = function(){
var app_router = new AppRouter;
app_router.on('route:portal-home',function(id) {
var campaignView = new CampaginView();
campaignView.render({id: id});
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
This is a hunch based on this SO question/answer and based on reading the code of Backbone.js.
I think Backbone is having trouble finding jQuery so you'll have to set it yourself. Try to do it by using a shim with an init function for Backbone:
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone',
init: function (_, $) { Backbone.$ = $; return Backbone; }
}
I'm using momentjs for my backbone project with requirejs. Everthing works fine the following way
require.config({
baseUrl : 'js/',
urlArgs: 'bust=' + ( new Date() ).getTime(),
paths: {
jquery : 'libs/jquery-2.0.3.min',
underscore : 'libs/underscore-min',
backbone : 'libs/backbone-min',
moment : 'libs/moment-2.3.1.min',
momenttweet : 'libs/moment.twitter',
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
moment: {
exports: 'moment'
},
momenttweet: {
deps: ['moment'],
exports: 'moment'
}
}
});
The above config breaks when I build using r.js to get .min file
Any solution to make it work.
Source of Moment.twitter
https://github.com/SpiderStrategies/moment.twitter
Or any idea how to make moment.twitter AMD Compatible
I tried wrapping up the moment.twitter within define call and removed the momemnt.twitter from the dependency and the shim
define([
'moment'
], function( moment ) {
var second = 1e3, minute = 6e4, hour = 36e5, day = 864e5, week = 6048e5;
var formats = {
seconds: {
short: 's',
long: ' sec'
...
...
...
return moment;
});
and include the above file as a dependency in files where the moment.twitter is required and call it as moment.twitterShort();