laravelquillreferenceerror

Laravel 9 Uncaught ReferenceError: Quill is not defined


I have installed Quilljs in my Laravel 9/Vite project and it runs fine on my local machine.

When I uploaded it to my server, I did the following:

And I have the following at the bottom of my blade file:

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var toolbarOptions = [
            [{ 'header': [1, 2, 3, false ]}],
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],

            [{ 'color': [] }],
            [{ 'align': [] }],

            ['clean']
        ];

        var quill = new Quill('#quill_note', {
            modules: {
                syntax: false,
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });

        window.quill = quill

    });
</script>

On my server I get "Uncaught ReferenceError: Quill is not defined", pointing to the row:

var quill = new Quill('#quill_note', {

This is the identical setup I have on my local build.

Any thoughts as to why I get this error even though I have successfully installed and imported Quill?


Solution

  • It turns out that Quill doesn't work when imported into the Vite js file when using "npm run build".

    I removed it and added the CDN script line

    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    

    instead in the head. Then it worked fine.