How to use it with NPM WebPack?

[ghiscoding]

Hello, this seems like a really great plugin. The only problem is that I can't seem to find a way to use it with NPM/WebPack since it was done only for JSPM. Will it be possible to make it work with NPM and not just JSPM?

I tried to include this in my main.js

import { aureliaChart } from 'aurelia-chart';
import 'aurelia-chart';

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .feature('aurelia-chart');

  aurelia.start().then(a => a.setRoot('src/app'));
}

but then I get the following error

Unhandled rejection Error: Cannot find module './aurelia-chart/elements/chart-element'.

[grofit]

I dont know what is needed outside of the normal package.json main pointing to the entry point file for the plugin. Half the problem I have with aurelia is I have to jump through so many hoops to get stuff working with different packagers and transpilers etc.

If you can confirm you are using the latest version and the main in the package.json is pointing to the right place etc, then if that is all correct then is NPM webpack some different flavour of webpack? as I use webpack lots for other projects and I just use UMD and it works on everything, so not sure if there is anything else specific I need to know if this is a unique verison of webpack.

[ghiscoding]

Hello, thanks a lot for the reply.

I spent some more time on this and actually got your code working but only after copying all your src folder into my own Aurelia project and then use it with .feature() instead of .plugin(). I had to modify couple of line of code to make it to work and I was in business.

So yes I did get it working with latest Aurelia RC1, but I still can't figure out how to run your code as a plugin like we should. The reason of going with NPM install is not just for Webpack, if you look at the new Aurelia CLI, you will see that they also use it instead of JSPM. Do please note that JSPM is not going away, but NPM is getting more used versus JSPM.

I wish that I could find the complete way to make it to work so that I can contribute to your project. So far the only thing that I found, is whatever dependencies you have under JSPM (inside the package.json), also has to be included outside so that NPM can detect them as well and install them (if user wish to run npm install).

P.S. I'm still newbie with Aurelia, and using it for personal project so far, but I really like your plugin and would love to use it and contribute as much as I could :)

[ghiscoding]

So as I mentioned in previous message, the dependencies found under JSPM should also be outside so that NPM could detect them as well and install them (if user wish to run npm install instead of jspm install)

I still can't get it to work as a plugin, but anyway the package.json of your project now looks like the following

 // ...
"jspm": {
    "dependencies": {
      "aurelia-bootstrapper": "npm:aurelia-bootstrapper@^1.0.0-beta.1.1.2",
      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@^1.0.0-beta.1.1.3",
      "aurelia-framework": "npm:aurelia-framework@^1.0.0-beta.1.1.2",
      "aurelia-metadata": "npm:aurelia-metadata@^1.0.0-beta.1.1.4",
      "aurelia-templating": "npm:aurelia-templating@^1.0.0-beta.1.1.1",
      "chartjs": "npm:chart.js@^2.0.2"
    },
    "devDependencies": {
      "aurelia-pal-browser": "npm:aurelia-pal-browser@^1.0.0-beta.1",
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4",
      "text": "github:systemjs/plugin-text@^0.0.7"
    },
    "directories": {
      "lib": "dist/system"
    }
  },
 // then the same dependencies for NPM usage
"dependencies": {
    "aurelia-bootstrapper-webpack": "^1.0.0-rc.1.0.0",
    "aurelia-dependency-injection": "^1.0.0-rc.1.0.0",
    "aurelia-framework": "^1.0.0-rc.1.0.0",
    "aurelia-metadata": "^1.0.0-rc.1.0.0",
    "aurelia-templating": "^1.0.0-rc.1.0.0",
    "chart.js": "^2.1.6",
  },  
  "devDependencies": {    
    "aurelia-pal-browser": "^1.0.0-rc.1.0.0",
    "babel": "^6.9.1",
    "babel-runtime": "^6.9.1",
    // then the rest of the other devDependencies that were already there
    "aurelia-bundler": "^0.3.2",
    "aurelia-tools": "^0.1.12",
   // ...

[grofit]

ah yes so you need the dependencies adding back in for npm consumption? as the main should be there like this: "main": "dist/commonjs/index.js". Have you tried just cracking open the node_modules folder and altering the package.json for this project and adding the dependencies and seeing if it builds ok with the dependencies added?

[ghiscoding]

I spent a lot of time on this and still can't get it to bundle properly. I did find at least 1 problem with your JSPM package, there's an alias used as chartjs while on npm the package is really named chart.js (with the .) and so we should rename it inside the JSPM config.js. Even though, I still can't get a valid bundling in place for webpack to work correctly, this is so frustrating. Still working on it...

Just as a reminder, I can get all your code to work correctly (and it's awesome) if I copy over all your src code and put it as my own code and use the .feature(). It all works, but it's the transform to a real plugin with the use of .plugin() that doesn't work. If I take the skeleton-plugin and run the Gulp build, it does compile and produce the dist folder but it doesn't want to accept it in Webpack.

Still a work in progress :S

[grofit]

After asking around (still not looked into it fully) I got told this from someone who is quite active in the Aurelia scene:

feature is only used if it's a plugin in your own source-tree. Plugin always looks for the module, while feature looks for the class name.

From my perspective its a pain, as the core part of all this (the actual binding) should work fine, its pretty simple, just Aurelia and JSPM turn what should be a 5 minute job into a 5 hour job with much head banging. I am sorry you are having problems consuming it but I am being hammered at the moment with other work and historically any time I have tried to update Aurelia stuff it is MANY hours lost updating all related dependencies, getting the example to work again without needing a build script etc, so until I have a couple of days to burn I don't want to dive too in depth on this, I will try to find some time soon though, and who knows it may actually be a 5 min job updating it this time... maybe...

[grofit]

I went on the aurelia chat earlier and came away more confused than when I went in, as depending upon how you are consuming stuff, if you are using the CLI you need to do stuff one way and it outputs as AMD modules from what I could find out, however a lot of people are having problems and stick with the JSPM stuff but that apparently has issues, and this is built against babel 5 not the newer babel 6 stuff so given that there are so many issues at the moment I am not relishing having to wade through the mire of changes to work out if I should be using the CLI now or other building approaches etc.

[ghiscoding]

Thanks for the reply, I feel your pain, I'm on the learning side with Aurelia (haven't done any major app yet) and I do wish that packaging/bundling would be better. They seem to all have their side effects, JSPM is slow and I'm not crazy about having to always update the config.js mapping. Then there's WebPack, super fast and it include many things built in, but then there's always some packages which aren't working well with it (Socket.IO is an example). Finally we get to the CLI which uses RequireJS, and...wait, we're back to a mapping table with that one too, damn :(

So far, what I have found out on WebPack. It seems that WP is looking for the same name of the plugin .js to be in the root of the dist folder. That file has to be unique and contain all the code in 1 file (all files appended/minified into 1 file), so at the end in your case you need to have aurelia-chart.js in the root of dist folder, while the other amd, es2015,etc.. will be the same as before. I also found that every project have different build/task and the skeleton-plugin is built using JSPM and is not bundle ready (so it doesn't work well with WebPack neither RequireJS). I wish there would be more information online, the only example I found for building a plugin was for JSPM and is dated over a year.

On the good side, I can tell you that your code does work well, since I am running it with Aurelia RC1 but I only got it working as a .feature() in my local folder. If I get time, I'll try to update the necessary packages and make a PR.

If you ever have time to release a new version (before me), could you rename the chartjs to chart.js (with the .) in your code? Since the npm package is really named chart.js, it wasn't working in your code with the wrong alias (WebPack and RequireJS won't accept the alias). It's probably JSPM who has the wrong alias, but anyhow, you should use the same name as what is found on npm, so basically the name has to be changed in 3 locations: config.js, chart-attribute.js and chart-element.js.

If you haven't done it by the weekend, I'll do a PR with the correction of the alias and the latest RC1 release. Whoever comes first :)

[grofit]

I did make a start but as you say the information and going round in circles in aurelia chat just drained all time I had allocated to try and fix it, although one of the first things I did was change the chartjs to chart.js.

As you say if you are hosting the plugin locally you will want to load feature if its being loaded as an external module you will want plugin.

On a side note I use webpack a lot for other projects as the UMD bundling option is nice for anyone to consume anywhere, I was hoping I could just fix up the npm dependencies to match the jspm dependencies and then it would all work but from what people are telling me on chat I would need to do more as the CLI wont work and they are pushing people to that.

If all you need is those minor changes to the package.json I can do that right now as that should not require any other updating or re-writing of logic.

[ghiscoding]

It would certainly help to fix the chart.js on npm, that would make your plugin at least findable by npm and package manager like WebPack and RequireJS (CLI).

I still think that there's another problem with bundling in WebPack, having multiple files is maybe confusing WebPack. I'm not sure that WP knows his point of entry is the index.js.

Thanks for all the help and discussion, your package is really great ;)

[grofit]

I have pushed up 0.2.5 which may not fix all your issues but should at least bring it more inline with what you are after, give that a go and let me know if it helps at all.

[ghiscoding]

Thanks for all the work, unfortunately it still doesn't work as bundle with WebPack. I am on the other hand still able to run it locally with .feature() and so I will use that for now until I find the correct way to bundle it. Again thanks for your package, I love the work and effort you've put in, so thank you for that :)

Can I leave the issue open or do you prefer to close it?

[grofit]

its ok leave it open, I just have a few open source projects I am working on at the moment and normal work and other stuff, so unfortunately its just a case of finding time to deal with it, also given how much aurelia changes I dont keep 100% up to date with it atm, so if someone else can fix it great, if not it is just in the queue of things to work on which will be addressed at some point.

[ghiscoding]

Hello again, passed a little more time on this and finally decided to ask the question on StackOverflow - How to use an Aurelia JSPM plugin with WebPack, should have asked earlier seriously... and finally got it working with WebPack. I was very close to the actual answer.

So the only thing that we have to do is to add this piece of code at the end of the package.json file in the client/package.json

// WebPack -- client/package.json
dependencies {
 ...
},
"aurelia": {
    "build": {
      "resources": [
        "aurelia-chart/elements/chart-element",
        "aurelia-chart/attributes/chart-attribute"
      ]
    }
}

... and voilà!!!

I will try to make a examples-wp soon to add it to your great package. :) or perhaps a simple update to the readme.md might suffice?

[ghiscoding]

Simply modified the readme.md and made a PR, that should be enough for most people to get it going. If you still want me to build an example-wp to demo Webpack, then please let me know.

With all that, I will close the issue. :)

[grofit]

Sorry been super busy this week and probably will be next week, will check over the PR and get it pulled and tested ASAP, just make sure the example works for you if you can (just open the index.html in the example folder, if it shows the example we are good, if not then we need to do a bit more build script work or something.

[ghiscoding]

Yes I always test with your examples, it's in my project as an extra page. The page is your original example untouched, every works. Adding a new value, also works, it refreshes the graph after 2 sec.