0
votes

I apologize for the lack of details.. but that's kinda what the problem is... I am having a very hard time figuring out how to go about troubleshooting this.

There's multiple examples of this issue that I am not sure how to fix. I've linked to branches in a github repositort:

  1. bootstrap-material-design (6d6e439)
  2. leaflet.markercluster (https://github.com/diegohb/aurelia-leaflet-cluster/tree/master-task006)
  3. aurelia-leaflet (https://github.com/diegohb/aurelia-leaflet-cluster/tree/master-task005)

My environment:

  • node v6.10.2
  • npm v4.2.0
  • aurelia-cli v0.30.1
  • latest version of chrome

I've tried looking at the bundled vendor-bundle.js.. confirmed the define() statements are there. I've tried using the SystemJS api in Chrome Dev Tools to see what's configured but I can't really make sense of what I'm seeing.. i don't see any reference to vendor-bundle.js in the configuration.. only app-bundle.js.

In all instances I'm getting 404s for the specified packages at ~/package_name. I'd appreciate any help or pointers primarily on #2 - leaflet.markercluster package.

repro for #1 (material design) Running 6d6e439 with au run --watch.. on page load, using latest Chrome... I'm getting error:

Unhandled rejection Error: Fetch error: 404 Not Found Instantiating http://localhost:9000/bootstrap-material-design/scripts/material.js
Loading http://localhost:9000/bootstrap-material-design/scripts/index Loading http://localhost:9000/bootstrap-material-design Loading http://localhost:9000/app Loading http://localhost:9000/app at http://localhost:9000/scripts/vendor-bundle.js:3788:10911

ref: - https://github.com/aurelia/cli/issues/676 - https://github.com/aurelia/cli/issues/684

#2 Adding the following in aurelia.json causes error "L is not defined" which points back to line 35 in leaflet.js:

  {
    "name": "leaflet.markercluster",
    "main": "",
    "path": "../node_modules/leaflet.markercluster/dist",
    "resources": [
      "leaflet.markercluster.js",
      "MarkerCluster.css",
      "MarkerCluster.Default.css"
    ],
    "deps": ["leaflet"]
  }

See commit 0f9cf0e.

#3 This seems to be due to outdated code for this package... error is "aurelia.globalizeResources is not a function"

Is there any documentation on how to troubleshoot SystemJS issues?

Thanks!

1
I checked out the first branch (master-task002) and everything works fine. I did a checkout, npm i, au build, au run. App is available at localhost:9000 w/o any error. Can you write down your steps to reproduce the error? - Marc Scheib
@MarcScheib - i added repro steps.. I'm not seeing anything load up like you described on branch task002. any help or work-arounds that will let me start using aurelia-cli now while the bugs are worked out would be appreciated. - diegohb

1 Answers

0
votes

While this can't be the ultimate solution.. the following change to aurelia.json seems to get rid of the 404 error and work:

null out main and add materialize and ripples as resources

see commit 7dcf0e4. If you au run, you will see au-cli report

Tracing app... error E:\dev\projects\playground\au-leaflet-cluster\node_modules\bootstrap-material-design.js

but when you load the page, it will bundle and load correctly without errors.. and you will notice that once clicked, the button has the "ripple" effect as expected.

I'll wait a few days to see if anyone has a real solution before closing out this question with this hack-fix.