Using PivotTable.js with aurelia and asp.net core

Question

My Project is setup based on ASP.Net Core with aurelia, as in this video by Rob Eisenberg https://channel9.msdn.com/Events/Build/2017/T6032

Now I'm trying to use PivotTable.js plugin with it. It has an example function:

$(function () {
  $("#output").pivot(
    [
      { color: "blue", shape: "circle" },
      { color: "red", shape: "triangle" }
    ],
    {
      rows: ["color"],
      cols: ["shape"]
    }
  );
});

I tried it first in a simple html page with inline script tags and it worked fine. In aurelia project, I wrap it in a load() function that gets triggered on a button click:

//playground.html
<button id="btn1" click.trigger="load()">Load</button>
<div id="output"></div>

............

//playground.ts
import $ from 'jquery'

export class Playground {
   load() {
    $(function () {
        $('#output').pivot(
    ...
   }
 }

I installed it with npm, now it looks like I'm having problem referencing it correctly. I tested with having it directly in the script tag of my viewmodel

     <script type="text/javascript" src="pivot.js"></script> 

It keeps throwing "pivot is not a function" error like below:

    jQuery.Deferred exception: __WEBPACK_IMPORTED_MODULE_0_jquery___default(...)(...).pivot is not a function app/components/play/playground/Playground.prototype.load/<@http://localhost:63822/dist/app.js?v=Co4Zys-nKtxDfRHuYeQtAcAzgXG9rRHqPqkwN0CzgJQ:27236:13

   mightThrow@http://localhost:63822    /dist/vendor.js?v=8kh55HdjmafGVyQfWaHURccoz4Vi-HAb9obSOc7CDCk:14851:21

     resolve/</process<@http://localhost:63822/dist/vendor.js?v=8kh55HdjmafGVyQfWaHURccoz4Vi-HAb9obSOc7CDCk:14919:12

     undefined
    vendor.js:15128:3
    TypeError: __WEBPACK_IMPORTED_MODULE_0_jquery___default(...)(...).pivot is not a function      

My Index.cshtml seemed to look into dist folder for scripts so I moved the pivot.js files into dist and added script tags there

<script type="text/javascript" src="~/dist/pivot.js"></script>
<script type="text/javascript" src="~/dist/pivot.min.js"></script>

I have added jquery and jquery-ui as dependencies and devdependencies (I do have doubts whether this is correct way to do it) in package.json :

    "devDependencies": {
          "jquery": "^3.2.1",
          "jquery-ui": "^1.12.1"
          ....
     },
      "dependencies": [
       { "jquery": "^3.2.1" },
       { "jquery-ui": "^1.12.1" } 
      ]

Also added a jquery as a plugin to webpack.config.js as suggested for some another plugin to make that work.

       plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })

I tried adding cdn links to jquery in script tags in my viewmodel. None of these changes have changed the error message. How should I be referencing this and similar jquery plugins?

Answer 1

I fought a while to get pivottable.js work with webpack and Aurelia. You will need the following NPM packages:

jquery
jquery-ui-dist
pivottable

The "normal" jquery-ui package did not work for me.

In your typescript file, use the following imports:

import * as $ from 'jquery';
import 'jquery-ui-dist/jquery-ui';
import 'pivottable';

Then you can use the $('#output').pivotUI(...) function. In your template HTML file, you will need to import the CSS:

<require from="pivottable/dist/pivot.css"></require>

Using this setup and the same ProvidePlugin code, I am able to use pivottable.js within webpack without additional script tags.

Answer 2

you probably should add an import statement
import 'pivottable';
after the jquery import if the npm package is right, this should do.

it is more of a webpack question than aurelia. googling "webpack jquery pivottable" should get you more answers.