Update to latest versions of Aurelia packages

Help Requests
1

I have a skeleton app I created for using Aurelia with .NET Core 2 and it’s been working fine. You can find it here:
aurelia-razor-netcore2-skeleton

I tried to update all the Aurelia packages to the latest versions and unfortunately something is broken, but I don’t know what. It won’t finish loading. The browser console does not show any errors, but does display some warnings. The full console output is as follows:

unreachable code after return statement
unreachable code after return statement
INFO [aurelia] Aurelia Starting
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 aurelia-kendoui-bridge.
INFO [aurelia-kendoui-bridge] Loading 0 wrappers  Array []
INFO [aurelia-kendoui-bridge] Loading 0 wrappers  Array []
DEBUG [aurelia] Configured plugin aurelia-kendoui-bridge.
DEBUG [aurelia] Loading plugin aurelia-dynamic-html.
WARN [array-observation] Detected 2nd attempt of patching array from Aurelia binding. This is probably caused by dependency mismatch between core modules and a 3rd party plugin. Please see https://github.com/aurelia/cli/pull/906 if you are using webpack.
DEBUG [aurelia] Configured plugin aurelia-dynamic-html.
DEBUG [aurelia] Loading plugin aurelia-tinymce-wrapper.
DEBUG [aurelia] Configured plugin aurelia-tinymce-wrapper.
onmozfullscreenchange is deprecated.
onmozfullscreenerror is deprecated.

There were no 404s for any files in the Network tab either… so I am not sure what the issue is.

You can find this broken version in a separate branch, here:
feature/aurelia-framework-1_3_1

The master branch is obviously the old version and works fine, in case you want to compare.

I would be ever so grateful if someone could tell me what’s wrong and how to fix it.

1 Like
2

You got multiple versions of binding in your project. Easiest to fix is to clean node_modules and delete package lock.json and reinstall everything again

3

Thanks. I tried your suggestion, but the problem remains. I deleted the package-lock.json and the node_modules folder, and then I also deleted my jspm_packages folder as well, just in case. Then I did jspm install and npm install. Unfortunately nothing has changed.

1 Like
4

If you are using jspm, is there anyway to tell jspm to alias all reference to aurelia-binding to top level package in node-modules only?

5

I have actually just noticed the problem myself in config.js… indeed there are multiple versions of aurelia-binding, as you said. I don’t know how I missed that before. Anyway, I have no idea how to solve this. I will do some Googling and see if I can come up with an answer. Hopefully I don’t have to manually edit the config.js.

1 Like
6

OK so I couldn’t find a way to remove the old versions of aurelia-binding from the config.js file with jspm and had to do so manually. So, when I run the app now I no longer get the warning about a 2nd attempt of patching array being detected… however, that is all that happens. The app still does not load. The messages from the console window now are identical to what I originally posted except for the warning I just mentioned is now gone. Any ideas?

EDIT: The changes I made are in the GitHub repo (see original post).

1 Like
7

I’ve still not managed to figure out what the issue is with this. It doesn’t help that there are no error messages. Is there anyone here who can give me a hand?

2 Likes
8

Let’s do a remote session? I can help directly & easily. Let’s chat on gitter then https://gitter.im/bigopon

1 Like
9

Thanks, I really appreciate that. I am unable to do so at the moment, but would you be free some time tomorrow? Please note that I am in Australia, so we may have an issue with time zone differences.

10

I’m in Melbourne, if you happen to be there too, we can even have a coffee :laughing:

And sure, tomorrow is fine. Let’s chat on gitter?

1 Like
11

Awesome! I’m in Adelaide though, but at least we won’t have an issue with timezones. I’ll message you on Gitter tomorrow then. Thanks!

1 Like
12

Hi again,

FYI - When I was looking at the issue again today, I was finally getting an error message in the console, which is as follows:

Error: (SystemJS) fields are not currently supported
	@http://localhost:8201/jspm_packages/npm/nprogress@0.2.0.js:1:123
	@http://localhost:8201/jspm_packages/npm/nprogress@0.2.0.js:1:31
	@http://localhost:8201/jspm_packages/npm/nprogress@0.2.0.js:1:2
	
	Evaluating http://localhost:8201/jspm_packages/npm/nprogress@0.2.0/nprogress.css
	Evaluating http://localhost:8201/jspm_packages/npm/nprogress@0.2.0.js
	Error loading http://localhost:8201/aurelia-app/shared/loading-indicator.js

I don’t know why this wasn’t showing up before… I ran it many times and this never showed up, until now… which is really weird. I have removed nprogress and everything works fine now.

@bigopon, thanks again for your offer of helping with a remote session, but this is obviously no longer necessary.

So anyway, for some reason nprogress is not playing nice with the latest version of Aurelia. Unfortunately there is no newer version of nprogress to update to yet, so I guess I’m stuck there. This is not a really vital issue for me though, so I’m not bothered about it, but if anyone does come up with a solution, please do comment below, because actually it will mean that the loading-indicator component in the Contact Manager Tutorial will not work with the latest version of Aurelia.

Thanks all

1 Like
13

For use nprogress with aurelia 2, do :
import nProgress from 'nprogress';

then use nProgress directly
exemple :
nProgress.configure({ speed: 700 });
nProgress.start();
nProgress.stop();