Utilise jQuery plugin with ES6 import

Question

I've installed the jquery plugin summernote using npm and it's within my node_modules directory.

I'm now trying to utilise the summernote function in much the same way as I was before when I was just loading the scripts within the html.

import { summernote } from 'summernote';

export default function () {
    const summernote = $('.editor');
    summernote.summernote();
}

I can't get past the above code throwing summernote.summernote is not a function

Hesta

I'm not sure what you're suggesting – Hesta

import { summernote } from 'summernote'; declare var $; is not valid syntax – Hesta

Which bundler are you using? – Labio

A jQuery plugin that does install a method to the global jQuery prototype would not export anything. Are you sure you did import jQuery and $ refers to jQuery? import $ from 'jquery'; import 'summernote'; should do. – Henceforward

That seems to have worked although jquery seemed to be working fine. It's only when I tried to access a plugin through a jquery obj would I get an error. – Hesta

Answer 1

This module doesn't export anything useful (like it should be expected from jQuery plugin package).

Imported summernote isn't used, and unused imported member makes an import a noop.

It should be

import 'summernote';

Precept