How to fix summernote is not a function?

I have problem with integrating summernote into my code I keep having this problem. I know there is lot of answer out there but I still can't find solution to mine.

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

and When I wrapped it in the $(document).ready(function() { I got additional error in my inspect with :

jQuery.Deferred exception: $(...).summernote is not a function TypeError: $(...).summernote is not a function

When I click on the line of error in my inspect it showing me at this line code of mine

let msg = $("#summernote").summernote("code");

I have declare the summernote cdn at my header script


<script type="text/javascript">

    $(document).ready(function() {
        $('#summernote').summernote({
            placeholder: 'description',
            tabsize: 2,
            height:200,
            toolbar:
            [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['help']]
            ]
        });    

    });
    

</script>

 <div class="nk-block nk-block-lg">
    <div id="summernote"></div>
 </div>

How do I fix this ?

Solution

Found my own answer. I have to declare the script into another file and that is how I solve my own questions.