Uncaught SyntaxError: Unexpected token import in "backbone.radio.js"

Question

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

Answer 1

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.