Uncaught TypeError: $(...).summernote is not a function?

B

BonBon Slick2017-04-07 01:49:29

JavaScript

BonBon Slick, 2017-04-07 01:49:29

summernote.org/getting-started/#basic-api Read the

docks, visited all their resources. I looked at the list of problems on the github, their solutions did not help me. Already killed the whole evening to find a solution. Google rattled the first page. I even tested different versions of the dependencies and the package itself, the connection sequence. The same goes for bootstrap, fontweights and jquery. Here is the general code, and it does not work:

//HTML
<head>
...
<script src="{{ asset('js/jquery-3.2.0.js') }}"></script>
<link href="{{ asset('css/summernote.css') }}" rel="stylesheet">
<script src="{{ asset('js/summernote.js') }}"></script> // ласт версии
...
</head>
<body>
// это идет компонентом, 
<div class="row">
    <h1>SummerNote editor:</h1>
    <hr>
    <div class="summernote"><p>тут переменная vue.js которая отрабатывает, и компонент отображает</p></div>
</div>
// это после инициализации блок #app для Vue.js
<script...
$('.summernote').summernote({
                    height: 300,
                    minHeight: null,
                    maxHeight: null,
                    placeholder: 'write here...',
                    focus: true
                });
</script>
</body>

It gives an error, in the question it is written:

Uncaught TypeError: $(...).summernote is not a function?

What could be the problem besides jQuery and dependencies?

I have already run them a lot and in different ways, they work in their pure form, but with Vue.js .... it gives this error, even if not used as a component, but immediately sculpted into a template, the same error.
Addition.Found this:

You should add the summernote init in the ready function instead of the created.

and a link to the Vue docks, if anything, this is how I initialize in the configuration file:

init(){
            $(document).ready(() => {
                alert("123"); // it works
         alert( $('#summernote').text()); // it works
                alert( $('#summernote').summernote()); // it is not
                $('.summernote').summernote({
                    height: 300,
                });
            });
        },

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

B

BonBon Slick, 2017-04-08
@BonBonSlick

In general, I found solutions, spent a day.
1 - initialize in init() function where you have it

init(){
            $(document).ready(() => {
                $('#summernote').summernote();
            });
        },

2 - initialize in the required packages for development (necessarily in the correct order)

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
.....
require('summernote');

3 - add webpack.mix.js files (required in correct order)

const { mix } = require('laravel-mix');
const laroute = 'public/js/laroute.js';
const File = mix.config.File;

mix.styles([
    'node_modules/font-awesome/css/font-awesome.min.css',
.....
    'node_modules/jasny-bootstrap/dist/css/jasny-bootstrap.min.css',
    'node_modules/summernote/dist/summernote.css'

], 'public/css/vendor.css').version();

mix
    .js('resources/assets/js/jquery.js', 'public/js')
.....
    .js('resources/assets/js/summernote.js', 'public/js')

Addition - lowered the version back to 0.0.1, so there is less risk of conflicts.
Addition - remove all trash that connected via script / link tags

E

Evgeny Kulakov, 2017-04-07
@kulakoff Vue.js

Perhaps the element for which the summernote() function is called does not yet exist.
Subscribe to the mounted event on the vue component and call your function on it.
Those. in the component:

mounted() {
 $('.summernote').summernote()
}