Trying to load jQuery plugin via npm

Question

I'm trying to load a jquery plugin in vuejs but nothing seems to be doing the trick.

I have

window.$ = window.jQuery = require('jquery');
// Plugin I'm trying to load
require('jcanvas');

The above part seems to work correctly (I think), but however when I try to use the plugin

$('canvas').drawArc({
            fillStyle: '#000',
            x: 100, y: 100,
            radius: 50
        });

It throws drawArc Is not a function error which seems like the plugin has not bee loaded in correctly or its not accessible.

Answer 1

import $ from 'jQuery'
import "jcanvas"

$('canvas').drawArc({
    fillStyle: '#000',
    x: 100, y: 100,
    radius: 50
});

Answer 2

I'm sure you've probably gotten past this, but I was having the same problem getting jCanvas to work with webpack.

The reason is that webpack treats loaded modules as immutable. Jcanvas extends jquery functionality, so it won't work. What you need to do is externally link to jquery via a normal script call in your html file.

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

Then, you exclude jquery from webpack

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
}; 

Now you should be able to use jCanvas or any other plugin that extends jquery within a webpack project.