I've been struggling to transition an application from Backbone to Marionette (v3) for the past two days.
Every time I try to run the app in the browser, I keep encountering this error in the console (resulting in a blank screen):
Uncaught SyntaxError: Unexpected token import in backbone.radio.js:1
The issue seems to stem from the import statement for underscore at the beginning of backbone.radio.js:
import _ from 'underscore';
My current setup involves using Requirejs as a module loader. Here is the configuration within 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 file shows my appinstance.js code:
define(function (require) {
var App = require('app')
return new App()
})
And here's a snippet from 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()
}
})
})
If anyone has insights on why I'm experiencing this issue, I would greatly appreciate your help.
I seem to have hit a roadblock with finding a solution, so any assistance will be valuable.
P.S.: The versions I'm working with are Marionette v3.0.0, Backbone v1.2.3, and Requirejs v2.1.15