Geek Answers Handbook

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

I created a new Aurelia plugin called Aurelia-Slickgrid and it all works locally with .feature('resources') . Then I was ready for the next step, making it available to everyone as a plugin, and created a Github project and made it available under that GitHub link - Aurelia-Slickgrid . I used the Aurelia Skeleton plugin to create my plugin, and also performed gulp build to create the transmitted output. Then I published it on NPM and successfully installed it using npm i --save aurelia-slickgrid . I am currently using Aurelia-CLI to build, and everything is going fine until I open the browser and see that the console got an error (now I still have a white page in the browser):

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

At the moment I am trying to download it as a plugin with Aurelia-CLI . The following is the full configuration:

index.js 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 (my local project)

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

aurelia.json (my local project)

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

If you are testing 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 use it in code through:

 import {AureliaSlickgrid} from 'aurelia-slickgrid';

There is almost no documentation on how to create an Aurelia Plugin , so I relied on another plugin, namely the Aurelia-Bootstrap made by the great Aurelia Contributor. One of the files that had a big impact on my plugin code was its index.js , and I used its coding style to encode mine.

Any idea where my problem might be?

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

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

Get a bit more after searching for several Aurelia plugins. It seems that globalResources should only have a pair of View / ViewModel (html / js), in my case I have only one of these pairs, which is SlickPager , and now only the one that is called globalResources() . Another possible problem, however, to confirm that I had a file called aurelia-slickgrid.js , which is the same name as the plugin name, can this cause a conflict? Maybe ... who knows. Somehow, I renamed it to slick-service.js and renamed the class to SlickService . Now I can call 2/3 of my objects in WebPack Skeleton , however I still cannot import the SlickService .

updated index.js 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 };

Now I can call it in WebPack without a problem

 import {SlickPager, SlickWindowResizer} from 'aurelia-slickgrid'; @inject(SlickPager, SlickWindowResizer) export class Test { constructor(slickPager, slickWindowResizer) { console.log(slickPager, slickWindowResizer); } }

However, if I import a SlickService , 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?
+7
javascript aurelia aurelia-cli
source share
1 answer
  • It doesn't matter if you name your file in the same way as your plugin.
  • globalResources accepts not only view / vm pairs, but (.html for html components and individual file resources only, such as custom behavior binding attributes and value converters).
  • You have a typo in slick-service.js, you should import SlickWindowResizer, not SlickResizer.
  • in aurelia.json you need to add an array of resources, for example: "resources": ["**/*.{css,html}"]
+4
source share

More articles:


All Articles