Aurelia router - missing dependency is crashing the router



I am migrating our old Aurelia app from an older jspm based skeleton to an aurelia-cli based project and I have run into an issue I have had no luck debugging on my own.

When I add the to the app.html, the otherwise working header and footer stop working so I can see that the issue comes from trying to migrate the routes:

  <require from="resources/scss/main.css"></require>
  <compose view-model="app/partials/header"></compose>
  <compose view-model="app/partials/footer"></compose>
  <compose view-model="app/partials/modals"></compose>

This is the console output:

DEBUG [aurelia] Loading plugin aurelia-templating-binding.
DEBUG [aurelia] Configured plugin aurelia-templating-binding.
DEBUG [aurelia] Loading plugin aurelia-templating-resources.
DEBUG [aurelia] Configured plugin aurelia-templating-resources.
DEBUG [aurelia] Loading plugin aurelia-event-aggregator.
DEBUG [aurelia] Configured plugin aurelia-event-aggregator.
DEBUG [aurelia] Loading plugin aurelia-history-browser.
DEBUG [aurelia] Configured plugin aurelia-history-browser.
DEBUG [aurelia] Loading plugin aurelia-templating-router.
DEBUG [aurelia] Configured plugin aurelia-templating-router.
DEBUG [aurelia] Loading plugin resources/index.
DEBUG [aurelia] Configured plugin resources/index.
DEBUG [aurelia] Loading plugin aurelia-i18n.
DEBUG [aurelia] Configured plugin aurelia-i18n.
DEBUG [aurelia] Loading plugin aurelia-animator-css.
DEBUG [aurelia] Configured plugin aurelia-animator-css.
DEBUG [aurelia] Loading plugin aurelia-google-analytics.
DEBUG [aurelia] Configured plugin aurelia-google-analytics.
DEBUG [aurelia] Loading plugin aurelia-testing.
DEBUG [aurelia] Configured plugin aurelia-testing.
DEBUG [templating] importing resources for http://localhost:9000/aurelia-templating-resources []
DEBUG [templating] importing resources for http://localhost:9000/aurelia-templating-router []
DEBO [aurelia] Aurelia Started
DEBUG [app] App Started
DEBUG [templating] importing resources for http://localhost:9000/app.html [“resources/scss/main.css”]
DEBUG [app-router] SyntaxError: Unexpected token <
at eval ()
at Qe (vendor-bundle.js:formatted:12468)
at vendor-bundle.js:formatted:12844

error @ vendor-bundle.js:formatted:26086
(anonymous) @ vendor-bundle.js:formatted:26144
processResult @ vendor-bundle.js:formatted:31016
(anonymous) @ vendor-bundle.js:formatted:30964

ERROR [app-router] Router navigation failed, and no previous
location or fallbackRoute could be restored.

I tried searching for an answer and the closes I got was that some asset that is being requested returns a generic 404 not found page which then is tried to be parsed as javascript, but I dont know how to trace, what resource is missing (the error is coming from router/app-router.ts function processResult)

Has anyone had experience debugging similar situations?
Thank you for your time


Maybe start commenting out part by part in your app, related to the router to see where things start to go wrong? Then you can focus down on what route it goes wrong and then you can poke into the right one?

Without knowing the details, it’s hard to help. We can do a vscode liveshare if needed :smiley:


Two questions might help:

  1. what browser?
  2. can you find that unexpected “<” in those stack trace locations (view vendor-bundler.js on those line numbers)?