summernote: how to fix : Uncaught TypeError: $(...).summernote is not a function

For me, simply adding “defer” attribute as follows works : )

My jquery version is 3.3.1

I had the same issue, make sure you load jquery before you load summernote.

jquery 3.4.1 and summernote v0.8.12 do not work together. How is it even possible that it bricks with every single jquery update…

This error can also be caused by blocking mixed content: If your current page uses https://, browser will block files, that are included via http:// (<link href="http://cdnjs…>)

In order to fix this you can try to change protocol of included files to https, or don’t specify protocol at all: <link href="//cdnjs…>

@hackerwins I just performed an update from summernote 0.8.2 to 0.8.6. I can say after tries:

• JQuery 3.2.0 + Summernote 0.8.2: OK
• JQuery 3.2.0 + Summernote 0.8.4: NO
• JQuery 3.2.0 + Summernote 0.8.5: NO
• JQuery 3.2.0 + Summernote 0.8.6: NO
• JQuery 3.2.1 + Summernote 0.8.6: NO

JQuery 3.2.1 + Summernote 0.8.6

 "jquery": "^3.2.1",
[...]
"summernote": "^0.8.6",

jQuery.Deferred exception: $(...).summernote is not a function TypeError: $(...).summernote is not a function
    at HTMLDocument.<anonymous> (http://localhost:3000/app/app.js?hash=79482fee9798d491a912e6133bf46f41635b8caa:9455:22)
    at mightThrow (http://localhost:3000/packages/modules.js?hash=74c7bb2ce3f5e4991dd308cb23b1aee097e9be3a:120311:29)
    at process (http://localhost:3000/packages/modules.js?hash=74c7bb2ce3f5e4991dd308cb23b1aee097e9be3a:120379:12)



Uncaught TypeError: $(...).summernote is not a function
    at HTMLDocument.<anonymous> (app.js?hash=79482fee9798d491a912e6133bf46f41635b8caa:9455)
    at mightThrow (modules.js?hash=74c7bb2ce3f5e4991dd308cb23b1aee097e9be3a:120311)
    at process (modules.js?hash=74c7bb2ce3f5e4991dd308cb23b1aee097e9be3a:120379)

Just for info, JQuery 3.2.0 and Summernote 0.8.2 are working together. Why the official recommanded version of JQuery is still 2.1.4 (released in 04/2015 !!) ?

                                    **2019 my solve was this** 

In my CSS section

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">

In my SCRYPT section

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js" defer></script>
    <script>
    $(document).ready(function() {
        $('#content').summernote();
    });
    </script>

In my form where i need to convert a textarea to summernote

<textarea name="content" id="content" cols="5" rows="5" class="form-control"></textarea>

For me, simply adding “defer” attribute as follows works : )

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js" defer></script>

My jquery version is 3.3.1

It was the solution that nailed my own problem thanks

Same issue here even replacing the jquery-1.11.0 to jquery-3…2.1 and I’m using latest summernote version 0.8.8.

@hackerwins just a friendly reminder to update the following line before releasing v0.8.8: https://github.com/summernote/summernote/blob/develop/package.json#L26 or remove it completely.

@hackerwins Maybe - maybe it’s simply stupid - it’s because when I perform a clean npminstall, JQuery 2.2.4 is still coming with the package?

meteor npm install summernote --save
xyz@ /Users/d/xyz
└─┬ summernote@0.8.6 
 └── jquery@2.2.4 

summernote@0.8.2 comes with nothing else than himself

**ekremgunes ** commented Mar 24, 2023 •

Isn’t there a BS5 for summernote? Have a look at “For Bootstrap 5” of the documentation.

Yeah, what’s going on here?

I’m trying to install this in a Vue app and I’m getting the $(...).summernote is not a function error as well.

Does Summernote install its own jQuery upon instantiation? If so, why?

Also, what version of jQuery is required to make the damn thing load???

us this: $(document).ready(function() { $('#summernote').summernote({ placeholder: 'Hello stand alone ui', tabsize: 4, height: 200 }); });

Any update on this? Combination of summernote@0.8.10 & jquery@3.3.1 does not work. I’m using angular/cli.

EDIT: I’ve managed to fix this using this solution.

In my case, delete the script’s defer attribute, then everything works. https://stackoverflow.com/questions/37885592/summernote-text-editor-not-working-in-simple-bootstrap-page-where-html-is-genera

v0.8.8 is released. I’ll close now. If you still have problem, please let me know.

@hackerwins Thanks! The issue can be closed I think (still active in 0.8.8 milestone). @guilhermeaiolfi Merged to 0.8.8.

http://summernote.org/getting-started/#include-jscss

Actually issue is that all versions of JQuery and summernote versions are not compatible. So you need to choose compatible versions of both modules and install them only using npm. Hope this will help you 👍