Emberjs application loads on all routes except Index

Question

I'm going to try my best and break down the problem im facing here, And the basic summary is that I have a ember-cli project and no matter what I do the index route will not load. But all my other routes load just fine.

//BROKEN ROUTE IMAGE https://i.sstatic.net/KB7Mw.png

//WORKING ROUTE IMAGE https://i.sstatic.net/YzheD.png

At first I thought well maybe it was my handlebars template. Then I updated to the latest version of ember-cli and used htmlbars, its still not showing. So I traced the Promise to see if there was any hope there:

VM66628:70 Ember Inspector (Promise Trace): Ember: Process errors from Router
at new Promise (http://localhost:4200/assets/vendor.js:59149:9)
at Promise.then (http://localhost:4200/assets/vendor.js:59387:21)
at Object.Transition.then (http://localhost:4200/assets/vendor.js:56759:29)
at didBeginTransition (http://localhost:4200/assets/vendor.js:34821:16)
at EmberObject.default.extend._doURLTransition (http://localhost:4200/assets/vendor.js:34104:7)
at EmberObject.default.extend.handleURL (http://localhost:4200/assets/vendor.js:34099:19)
at EmberObject.default.extend.startRouting (http://localhost:4200/assets/vendor.js:33986:38)
at exports.default.EmberObject.default.extend.startRouting (http://localhost:4200/assets/vendor.js:14194:14)
at Namespace.default.extend.didBecomeReady (http://localhost:4200/assets/vendor.js:14904:37)

VM66628:70 Ember Inspector ($E):  TypeError: Cannot read property 'extend' of undefined
at http://localhost:4200/assets/redberry-ios.js:1871:77
at mod.state (http://localhost:4200/assets/vendor.js:150:29)
at tryFinally (http://localhost:4200/assets/vendor.js:30:14)
at requireModule (http://localhost:4200/assets/vendor.js:148:5)
at requireFrom (http://localhost:4200/assets/vendor.js:121:12)
at reify (http://localhost:4200/assets/vendor.js:106:22)
at mod.state (http://localhost:4200/assets/vendor.js:149:17)
at tryFinally (http://localhost:4200/assets/vendor.js:30:14)
at requireModule (http://localhost:4200/assets/vendor.js:148:5)
at resolveOther (http://localhost:4200/assets/vendor.js:60054:20)

So i thought well maybe my Route/Application or Route/Index is bad.

//APPLICATION ROUTE
import Ember from 'ember';
export default Ember.Route.extend({

  actions: {
    sessionAuthenticationFailed: function(params) {
      this.controllerFor('sessions/new').set('errorMessage', params.error);
    },
    error: function(error, transition) {

      this.render('error', {
        into: 'application'
      });
    }
  }
});
//INDEX ROUTE
import Ember from 'ember';
export default Ember.Route.extend({

  model: function() {
   return this.store.find('product'); 
  },
  actions: {

  }
});

//A ROUTE THAT WORKS
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.Object.create();
  },
  activate: function() {
    this._super();
    document.title = "Sign In";
  }
});

And now Im not exactly sure what to think because I can't find any documentation on this. I feel like it shouldn't be occurring but in case someone else has this issue I would love to know the solution.

MY adapter:

Ill be spending a few more hours looking into it, but the adapter looks fine:
import DS from 'ember-data';
import Ember from 'ember';
import ENV from "../config/environment";

Ember.$.ajaxSetup({
  crossDomain: true,
  xhrFields: {
    withCredentials: true
  }
});

export default DS.ActiveModelAdapter.extend({
  namespace: ENV.NAMESPACE,
  host: 'http://testing.herokuapp.com'
});

UPDATE:

So everyone can see that Im not passing dymanic segments although it says I am this is what my template looks like:

<!--APPLICATION.HBS-->
{{outlet "modal"}}
{{partial "header"}}
<div class="interior">
	<div class="wrapper">
	<div class="row">
		<div class="span14 list-view">
			{{outlet}}
		</div>
	</div>
	</div>
	{{partial "footer"}}
</div>


<!--HEADER.HBS-->
<div class="nav">
    <ul class="ul-left">
        <li>{{#link-to 'index' tagName="a"}}
        	<h1><i class="rb-redberry error"></i></h1><!--{{make-title titleName}}-->
       {{/link-to}}</li>
    </ul>
    <ul class="ul-right">
    </ul>
</div>
        
        
        
<!--HEADER.HBS-->
<h1>Hello I am the Index and I loaded</h1>
        
        
<!--FOOTER.HBS-->
<div id="footer">
		<div class="span14">
			<div class="row centered">
			<div class="span9">
				<ul>
					<li>Home</li>
					<li>Shop</li>
					<li>About Us</li>
					<li>Blog</li>
					<li>Become a Seller</li>
					<li>Contact Us</li>
					<li>Terms of Use</li>
				</ul>
			</div>
			<div class="span3">
					<div class="row"></div>
					<div class="row"></div>
			</div>
		</div>
		</div>
	</div>

UPDATED UPDATE:

I figured out that the dynamic segments was being caused by creating a error resource. After removing that I was able to single it down to one error.

Error while processing route: index Cannot read property 'extend' of undefined TypeError: Cannot read property 'extend' of undefined

Answer 1

"It seems like you're trying to run ES6 syntax in a non-ES6 environment"

@milkywayjoe You were in the right direction but the bigger question was exactly what syntax caused the error? I ended up doing a ember new project, then comparing file by file and the only thing that stood out was a change in the import method.

I was using a strict import:

import 'project/utils/plugins';

but the relative import seems to be the only thing that works

import '../utils/plugins';

I was able to find one other person with this issue and it seems they also came to the same result.

Addon not working

He mentions the Ember apps namespace but more specifically the modulePrefix thats set up in the config file. This seems to be the only solution for this error right now.