Problem installing via NPM

[mookid8000]

Hello there, this is JavaScript n00b with a problem.... I am sorry if this is a completely obvious mistake on my part, but it could also be an error.... and I need to stop hitting myself on the head with this!

I would love to use aurelia-chart in my new Aurelia app, so I happily

au new --here

with mostly default settings all the way to create a the app. I am using version 0.17.0 of aurelia-cli btw. Then I

npm install aurelia-chart --save

and go edit aurelia.json to add the build resources like described in the readme, like so:

"aurelia": {
    "build": {
      "resources": [
        "aurelia-chart/elements/chart-element",
        "aurelia-chart/attributes/chart-attribute"
      ]
    }
}

but then I figured that aurelia-chart would also need to have something added in the dependencies field – otherwise aurelia.use.plugin('aurelia-chart') would of course not work – so I added

{
    "name": "aurelia-chart",
    "path": "../node_modules/aurelia-chart/dist/amd",
    "main": "index"
}

because that could make au build succeed. Having added aurelia.use.plugin('aurelia-chart') to my configure function, I tried to run the application, but it complained that chart.js was missing. So I figured I would install that, which I did by going

npm install chart.js --save

after which I added

{
    "name": "chart.js",
    "path": "../node_modules/chart.js/dist",
    "main": "chart"
}

to aurelia.json so I could build.

Now when I run the application I get these messages in the console – first this:

Uncaught TypeError: h.load is not a function

and then this:

Unhandled rejection Error: Load timeout for modules: template-registry-entry!aurelia-chart/elements/chart-element.html_unnormalized2,template-registry-entry!aurelia-chart/elements/chart-element.html,text!aurelia-chart/elements/chart-element.html_unnormalized3,text!aurelia-chart/elements/chart-element.html
http://requirejs.org/docs/errors.html#timeout
    at Error (native)
    at F (http://localhost:9000/scripts/vendor-bundle.js:3661:290)
    at H (http://localhost:9000/scripts/vendor-bundle.js:3667:56)
    at http://localhost:9000/scripts/vendor-bundle.js:3667:227
    (...snipped because it's a very deep stack trace...)

I apologize in advance for the long tale of my woes - if anyone can tell me what is wrong with me, I would be (on the road to becoming) very happy... 😩 ➡️ 😐 ➡️ 😁

In case someone gets a kick out of these things, I have included a screenshot of the entire thing:

[mookid8000]

now I came across this issue where it is shown that resources can be added within the dependencies element - I tried doing that (adapting the paths to point relatively correct) like this:

{
    "name": "aurelia-chart",
    "path": "../node_modules/aurelia-chart/dist/amd",
    "main": "index",
    "resources": [
        "elements/chart-element.js",
        "attributes/chart-attribute.js"
    ]
}

which I could build just fine.... but then I got another error when running the app:

vendor-bundle.js:3661 Uncaught Error: Mismatched anonymous define() module
(...source code here...)

Am I on the path to something? Is this a sign that aurelia-chart is just not supported with aurelia-cli?

[grofit]

Hey, I don't have a clue, Aurelia recently did a major update with breaking changes and also now some people use jspm (which was supported for last version) others use NPM some people use webpack and others, problem is that I cannot find out specifically what needs to change to support the new aurelia and webpack things, for my other plugins someone has just made the config change (as the core library logic has not changed in ages and should still be stable).

I will see if I can find out what specifically needs to change as there are few errors outstanding all to do with the latest version of aurelia and webpack.

[erickbarbosa]

Hi, I have the same problem... exactly this result =\ Do you found any solution?

I found this related post: http://stackoverflow.com/questions/15371918/mismatched-anonymous-define-module

and

http://requirejs.org/docs/errors.html#mismatch

[grofit]

Not a clue, from my perspective the latest version of aurelia is basically wanting plugin authors to support npm, webpack, jspm as well as their custom toolchains around each like the AMD Aurelia CLI and the custom webpack faff and I have asked for someone in the team to take a look a few times and it got no traction so if someone can make a reproduction in cloud9 or somewhere I can attempt to take a look and see if I can come up with some fix.

[erickbarbosa]

Yep, I fixed it, using aurelia-skeleton with jspm...then it worked...but I had to restructure my project =\

[grofit]

Glad it works for you, its a pain for you though having to completely change your project just to get your dependencies via some other lib.

[pkozul]

I posted some info which I believe is related to this:

aurelia/cli#270

[grofit]

I am not sure if it helps but someone told me that the CLI currently cannot handle double quotes, so it needs single quotes around the entries in there or it bombs out, not sure if that is related.

[jrmitch120]

As @pkozul alluded to, this has been fixed via aurelia/cli#283 and is available in aurelia-cli 0.20.0.

For reference, my working auerlia.json bits:

{  
    "name": "chart.js",
    "path": "../node_modules/chart.js/dist",
    "main": "chart"
},
{  
    "name": "aurelia-chart",
    "path": "../node_modules/aurelia-chart/dist/amd",
    "main": "index",
    "resources": [  
        "elements/chart-element.js",
        "elements/chart-element.html",
        "attributes/chart-attribute.js"
    ]
}

[grofit]

Marking this as closed then, if problems still arise feel free to re-raise.