Uncaught TypeError creating an Aurelia Plugin: plugin.load is not a function

Question

I created a new Aurelia plugin, which is named Aurelia-Slickgrid and got it all working locally with .feature('resources'). I was then ready for the next step, making it available to everyone as a plugin and created a Github project and made it available under this GitHub link - Aurelia-Slickgrid. I used Aurelia Skeleton Plugin to create my plugin, also ran gulp build to create the transpiled output. I then published it on NPM and successfully installed it with npm i --save aurelia-slickgrid. I am currently using Aurelia-CLI to bundle and everything goes well, until I open the browser and see that an error got thrown in the console (now I'm left with a white page in the browser):

Uncaught TypeError: plugin.load is not a function
    at Module.<anonymous> (vendor-bundle.js:5308)
    ...

For the moment, I am trying to load it as a plugin with Aurelia-CLI. See below for the complete configuration used:

index.js of the plugin

import {AureliaSlickgrid} from './aurelia-slickgrid';
import {SlickPager} from './slick-pager';
import {SlickWindowResizer} from './slick-window-resizer';

export function configure(config) {
  config.globalResources('./aurelia-slickgrid');
  config.globalResources('./slick-pager');
  config.globalResources('./slick-window-resizer');
}

export {
  AureliaSlickgrid,
  SlickPager,
  SlickWindowResizer
}

main.js (of my local project)

aurelia.use
    .standardConfiguration()
    .feature('resources')
    .plugin('aurelia-slickgrid');

aurelia.json (of my local project)

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

If you're testing with an empty Aurelia CLI project you need to add:

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

Finally import to use it in code via:

import {AureliaSlickgrid} from 'aurelia-slickgrid';

The documentation on how to create an Aurelia Plugin is almost non existing, so I based myself on another plugin, namely Aurelia-Bootstrap made by a great Aurelia Contributor. One of the file that greatly influenced my plugin code was his index.js and I used his coding styling to code mine.

Any idea where could be my problem?

---

I also tried to add resources to the aurelia.json, however it had no effects.

{
  "name": "aurelia-slickgrid",
  "path": "../node_modules/aurelia-slickgrid/dist/amd",
  "main": "index",
  "resources": [
    "**/*.html"
  ]
},

---

Got a bit further, after searching for a few other Aurelia plugins. It seems that globalResources should only be View/ViewModel pair (html/js), in my case I only have 1 of those pair which is SlickPager and now only that one is being called by globalResources(). Another possible problem, still to confirm though, I had a file named aurelia-slickgrid.js which is the same naming as the plugin name, could that cause a conflict? Possibly...who knows. So anyway, I renamed it to slick-service.js and renamed the class to SlickService. I am now able to call 2/3 of my objects in the WebPack Skeleton, however I still can't import SlickService.

updated index.js of the plugin

import { SlickService } from './slick-service';
import { SlickPager } from './slick-pager';
import { SlickWindowResizer } from './slick-window-resizer';

export function configure(aurelia) {
  aurelia.globalResources('./slick-pager');
}

export { SlickService, SlickPager, SlickWindowResizer };

I can now call this in WebPack without issues

import {SlickPager, SlickWindowResizer} from 'aurelia-slickgrid';
@inject(SlickPager, SlickWindowResizer)

export class Test {
  constructor(slickPager, slickWindowResizer) {
    console.log(slickPager, slickWindowResizer);
  }
}

However if I import SlickService as well, it throws an error

import {SlickPager, SlickWindowResizer, SlickService} from 'aurelia-slickgrid';
@inject(SlickPager, SlickWindowResizer, SlickService)

export class Test {
   constructor(slickPager, slickWindowResizer, slickService) {
      console.log(slickPager, slickWindowResizer, slickService);
   }
}

previous code with SlickService now throws this error

ERROR [app-router] Error: Error invoking SlickService. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

Answer 1

1. It doesn't matter if you call your file the same as your plugin.
2. globalResources accepts not only view/vm pairs but (.html for html-only components and single file resources like custom attributes binding behaviors and value converters).
3. you have a typo in slick-service.js you should be importing SlickWindowResizer not SlickResizer.
4. in aurelia.json you need to add the resources array, like: "resources": ["**/*.{css,html}"]