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.

can you try to import jQuery as `import $ from 'jQuery'` and use the dollar sign inside your methods. It should work — samayo, Feb 27 '18 at 13:19
Did `import $ from 'jquery'` but now its throwing ` jquery is not defined` — Vilius, Feb 27 '18 at 13:39
@BelminBedak ,I beleive I'm using webpack (sorry for unclarity but I'm kind of new to this). This is part of Laravel Packagde which provides elixir builder, which the compiles the main app.js file, which has bootstrap.js which contains the `jquery` and `jCanvas` lines — Vilius, Feb 27 '18 at 13:48

score 0 · Answer 1 · edited Feb 27 '18 at 14:19

0

import $ from 'jQuery'
import "jcanvas"

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

edited Feb 27 '18 at 14:19

Bucket

7,415
9
35
45

answered Feb 27 '18 at 13:22

аlex

5,426
1
29
38

This didn't seem to work, bootstrap and other modules crash. The initial import `window.$ = window.jQuery = require('jquery');` does seem to work as I've used jquery previously, but its the plug in that seems to hang – Vilius Feb 27 '18 at 13:43

score 0 · Answer 2 · answered Oct 13 '18 at 07:47

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.

Trying to load jQuery plugin via npm

2 Answers2