Aurelia router - missing dependency is crashing the router

Help Requests
1

Hi!

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:

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

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

1 Like
2

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:

1 Like
3

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)?
2 Likes
4

Hi!

Sorry for not replying sooner - since I got stuck on this process, I decided to put it aside for a little while and come back at it a second time with a fresh mind.

Truth be told, today morning I got an idea while showering and had to test it out immediately (but I did finish my shower first). I found out that the problem was with the way routes were set up (or to be more precise, it was problematic how I ported them over without catching this mistake) - after the “migration” the source files were one folder further away from the app.ts and main.ts files and I did not account for that. I thought that since the file defining the routes was in the same place relative to the mentioned views, I did not have to update the moduleIds.

With this out of the way, I decided to continue working on the “migration” fullspeed and I managed to cover at least half of the functionality that broke due to major version updates.

Yet another day reminding me how cool it is to work with Aurelia.

1 Like