Laravel 9 Uncaught ReferenceError: Quill is not defined

Question

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:

• ran the requisite "npm install [email protected]"
• Added "import '../../node_modules/quill/dist/quill.js';" to my "resources/js/app.js" file
• Added "@import '../../node_modules/quill/dist/quill.snow.css';" to my "resources/sass/app.scss" file
• Ran "npm run build" without any error
• Ran "php artisan optimize"

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?

Answer 1

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.