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

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?

It doesn't matter if you call your file the same as your plugin.
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).
you have a typo in slick-service.js you should be importing SlickWindowResizer not SlickResizer.
in aurelia.json you need to add the resources array, like: "resources": ["**/*.{css,html}"]

Related

react-table/react-table.css cause test to crash on compile

I have code that works and tests that work. I only have one problem in my react-table file. The api for react-table.js says to use their css file I need in my react-table.js file import "react-table/react-table.css"; but when I do this my test crash on compile. I'm using basically a copy of the example of simple table on the react-table.js webpage. How do I use their css file and still get my test to run?
this is the error I get If I dont comment out the css import
For testing, you need to mock the css/image imports
"jest": {
"moduleNameMapper": {
".*\\.(css|scss|sass)$": "path/to/styleMock.js",
".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "path/to/assetMock.js"
},
(Make sure you adjust the path to the mock files appropriately)
styleMock.js
module.exports = {}
assetMock.js
module.exports = 'IMAGE_MOCK'
Reference: https://jestjs.io/docs/en/webpack#handling-static-assets

how to import js-pagination into aurelia project

I'm trying to use https://www.npmjs.com/package/js-pagination within aurelia project.
I did au install js-pagination and did check the aurelia.json.
That part was added to vendor-bundle:
{
"name": "js-pagination",
"main": "dist/index.js",
"path": "../node_modules/js-pagination",
"resources": [
"dist/styles.css"
]
}
the ./node_modules/js-pagination and ./node_modules/js-pagination/dist/index.js are in place
I did check the vendor-bundle.js
and it has three lines about js-pagination.
One line is a source of ./dist/index.js
and next two lines are
define("js-pagination/dist/index", [],function(){});
;define('js-pagination', ['js-pagination/dist/index'], function (main) { return main; });
My problem is:
I'm trying to use it inside my module, like
let Pagination = require('js-pagination')
and Pagination is still undefined
I did try with
import * as Pagination from 'js-pagination'
and default property of Pagination module is undefined
import {Pagination} from 'js-pagination'
does not make a show as well
I'm missing something, but cannot realize what exactly.
Please advice.

Integrating React components with Pux - where does require() come from?

The Pux documentation tells me to use require() in the browser. Where does that function come from and how do I use it?
Background:
I'm trying to integrate the Quill editor with my web application that uses purescript-pux.
Following the Pux documentation I created a file MyEditor.js like this:
// module MyEditor
var React = require("react");
var Pux = require("purescript-pux");
var MyEditor = React.createClass({
displayName: "MyEditor",
onTextChange: function onTextChange(value) {
this.setState({ text: value });
},
render: function render() {
return React.createElement(ReactQuill, { value: this.state.text,
onChange: this.onTextChange });
}
});
exports.fromReact = Pux.fromReact(MyEditor);
and a file MyEditor.purs as follows:
module MyEditor where
import Pux.Html (Html, Attribute)
foreign import fromReact :: forall a. Array (Attribute a) -> Array (Html a) -> Html a
I then use MyEditor.fromReact [value p.description] in my Html Action and the code compiles, but the browser complains about ReferenceError: require is not defined.
I'm not very familiar with the javascript ecosystem. I'm aware that several libraries providing a require() function exist, but which one do I use with Pux and how?
require is the NodeJS way of importing modules, it's not supported in the browser so you'll need to run your project through a bundler like browserify or webpack to produce a bundle that the browser can understand.
If you are using the pulp build tool it's as simple as running
pulp browserify --to app.js
and then loading app.js in your html through a script tag.
pulp browserify documentation: https://github.com/bodil/pulp#commonjs-aware-builds
In addition to Christophs answer (but can't comment since comments don't allow code blocks):
Using Thermite 4.1.1 this worked for me:
add a package.json file with:
{
"dependencies": {
"react": "^0.14",
"react-dom": "^0.14"
}
}
run npm install
from then on pulp browserify --optimise gets the whole shebang packaged.
This is really badly documented and I opened an issue about that on purescript-react.

use Chart.js in Aurelia

I'd like to use chart.js in an aurelia project, but I'm getting errors. How do I add 3rd party node packages to an aurelia app?
I'm using aurelia-cli, BTW
Here's what I've done
npm install --save chart.js
In aurelia.json I added the following
"dependencies": [
...,
{
"name": "chart.js",
"path": "../node_modules/chart.js/dist",
"main": "Chart.min.js"
}
]
In app.html I then add the line
<require from="chart.js"></require>
But, I get the error:
vendor-bundle.js:1399 Unhandled rejection Error: Load timeout for modules: template-registry-entry!chart.html,text!chart.html
I've tried various things like injecting the Chart into the app.html
// DIDN'T WORK :-(
// app.js
import {inject} from 'aurelia-framework';
import {Chart} from 'chart.js';
export class App {
static inject() { return [Chart]};
constructor() {
this.message = 'Hello World!';
}
}
And, then, in app.html, I added the following require statement
<require from="Chart"></require>
HERE'S THE SOLUTION
You can checkout a working example here. Initially, I thought you had to use the aurelia-chart module, however, it's very difficult to use, and so, I'd recommend you just use Chart.JS package instead. Here's how to incorporate the chart.js module into your Aurelia app:
npm install --save chart.js
In aurelia.json add the following line to the prepend section
"prepend": [
...,
"node_modules/chart.js/dist/Chart.min.js"
],
In the app.js file (or any other model-view file), add the line
import {Chart} from 'node_modules/chart.js/dist/Chart.js';
For, example, if you wanted to display a chart on the home page:
// app.js
import {Chart} from 'node_modules/chart.js/dist/Chart.js';
export class App {
...
}
And that's it!
1. Problem with require
First of all, don't use <require from="Chart"></require> in your app.html project. That is the source of your error message, since it's trying to load an Aurelia module and chart.js is not an Aurelia module (view/viewmodel) in your source code.
2. Alternate import syntax
Skip the inject lines in app.js, but try one of the following (try them one at a time) in either app.js or in each module you'll be using Chart. One of these imports is likely to work.
import { Chart } from 'chart.js';
import * from 'chart.js';
import 'chart.js';
3. Legacy prepend
If none of the above works, import it as a legacy repo using the prepend section of aurelia.json (before the dependencies section) like this:
"prepend": [
// probably a couple other things already listed here...
"node_modules/chart.js/dist/Chart.min.js"
],
Update for Aurelia-Chart: (added for any later viewers)
Since you ended up going with aurelia-chart (by grofit), here's the dependency code for aurelia.json:
"dependencies": [
...,
{
"name": "chart.js",
"path": "../node_modules/chart.js/dist",
"main": "Chart.min.js"
},
{
"name": "aurelia-chart",
"path": "../node_modules/aurelia-chart/dist/amd",
"main": "index",
"deps": ["chart.js"]
}
]
I just got this working with an aurelia cli project and it required some extra modifications.
I used au install chart.js but there is an open issue that states it is not intelligent enough yet to add references to package dependencies.
To make things work I added the following to my aurelia.json dependencies:
"moment",
"chartjs-color",
"chartjs-color-string",
{
"name": "chart.js",
"main": "src/chart.js",
"path": "../node_modules/chart.js",
"deps": ["chartjs-color", "moment"]
},
{
"name": "color-convert",
"path": "../node_modules/color-convert",
"main": "index"
},
{
"name": "color-name",
"path": "../node_modules/color-name",
"main": "index"
}
I was then able to import { Chart } from 'chart.js'; in my view model and run the chart.js quick start example from the attached viewmodel lifecycle method.
In the chart.js docs they mention including the minified version can cause issues if your project already depends on the moment library.
The bundled version includes Moment.js built into the same file. This version should be used if you wish to use time axes and want a single file to include. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.
This solution may help if you are in that position.

Using ember-cli-sheetjs in an ember component

I'm creating a website using ember and am currently having difficulty using the 'ember-cli-sheetjs' module in a component titled 'add-student.js'. I cannot seem to call any functions in the documentation using my current code.
To get the module in ember I added it to my dev dependencies inside package.json and then ran the "npm install" command which successfully installed the "ember-cli-sheetjs" module. I then try and use it by writing:
import Ember from 'ember';
import xlsx from 'npm:ember-cli-sheetjs';
//have also tried directly using the sheetjs module after
//installing sheetjs with the command
//npm install xlsx --save-dev
//import xlsx from 'npm:xlsx';
export default Ember.Component.extend({
fileinput: null, //this is set with an input handler in the hbs
actions: {
fileLoaded: function() {
console.log(this.get('fileinput')); //properly outputs the file name
var workbook = xlsx.readFile(this.get('fileinput'));
},
}
However this results an error saying:
add-student.js:134 Uncaught TypeError: _npmEmberCliSheetjs.default.readFile is not a function
I feel like the problem is that its not following the correct path to the function (which exists in the function documentation). If anyone can tell me what I'm doing wrong it would be a huge help.
Link to the module: https://www.npmjs.com/package/ember-cli-sheetjs
If anyone runs into this problem I have figured out a work around.
First in your index.html include the line:
<script src="assets/parsing/dist/xlsx.full.min.js"></script>
Next create a folder inside public (if it doesn't already exist) called assets. Next create a folder inside assets called 'parsing' and a folder in 'parsing' called 'dist'. Next in 'dist' create a file called 'xlsx.full.min.js'.
Next copy and paste the code from: https://raw.githubusercontent.com/SheetJS/js-xlsx/master/dist/xlsx.full.min.js into the xlsx.full.min.js file.
Finally, in whatever component you want to use the sheetjs module in just put the following below your import statement:
/* global XLSX */
This is a work around but it does allow you to use the sheetjs module.
Use Bower
// bower.json
"dependencies": {
"js-xlsx": "^0.11.5"
}
// ember-cli-build.js
module.exports = function(defaults) {
app.import('bower_components/js-xlsx/dist/xlsx.min.js');
}
and in your component as #Russ suggested:
import Ember from 'ember';
/* global XLSX */

Resources