jQuery.Deferred exception: Quill is not defined

@Sinnbeck i added window.Quill = Quill; to app.js and ran npm run dev and it didnt work, yes its an inline script in standard <script></script> tags

@nebulous75 can you try posting your code? Add ``` on the line before and after your code

@Sinnbeck basically i have a button to take the input from the first quill and create a new disabled quill with the input from the first quill (after sending the contents of the first quill to a controller to add the commetn to the database)

<script>
        $(document).ready(function() {

            var newComment = new Quill('#new_comment', {
                placeholder: 'Write a comment...',
                theme: 'snow',
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline'],
                        ['blockquote', 'code-block'],
                        ['link'],
                        [{
                            'list': 'ordered'
                        }, {
                            'list': 'bullet'
                        }],
                        [{
                            'indent': '-1'
                        }, {
                            'indent': '+1'
                        }],
                        ['clean']
                    ]
                }
            });

            $('.ql-toolbar').addClass('rounded-top');

            $('.ql-tooltip').css('max-height', '0');//yes i know this is a bad idea

            $('#add-comment').click(function() {
                if ($('#booking-log').length) {
                    var comments = [];
                    var repairs = [];
                    $('#booking-log > div').each((index, elem) => {
                        if (elem.id.split('-')[1] == 'comment') {
                            postedComment.setContents("newComment.getContents()");
                        }
                    })
                } else {
                    $('#right-section').append('<div><div class="card mb-3" style="width: 50rem;"><h5 class="card-header">Booking Log</h5><div class="card-body d-flex flex-column" id="booking-log"></div></div></div>');
                    $.ajax({
                        url: '/comment/add',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            booking_id: {{ $booking->booking_id }},
                            delta: newComment.getContents()
                        },
                        success: function(data) {
                            console.log(data);
                            $('#booking-log').prepend('<div class="card"><div id="posted-comment-1" class="ql-container ql-bubble h-0" style="min-height: 2rem"></div></div>');
                            var postedComment = new Quill('#posted-comment-1', {
                                theme: 'bubble'
                            });
                            postedComment.disable();
                            postedComment.setContents(newComment.getContents());
                            $('.ql-tooltip').css('max-height', '0');
                        }
                    });
                }
            })
        });
    </script>

@nebulous75 and the app.js? Is the @vite above this script?

@Sinnbeck app.js has

import 'quill/quill';
const Quill = require("quill");

window.Quill = Quill;

and this code is in a component but @vite is in app.blade.php so it is loaded on every view

@Sinnbeck also the css isnt loading its not just js i have @import "../../node_modules/quill/dist/quill.core.css"; in app.scss and i dont know what the normal way of doing that is, i have <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet" /> in the view which is how its working at the moment

@nebulous75 check the console for any other errors

Regarding css imports. Depends on your css type. Try @import '~quill/dist/quill.core.css'

@Sinnbeck Failed to find '~quill/dist/quill.core.css' when i run npm run build

@nebulous75 so ignore css for now and focus on js

@Sinnbeck ok well the only errors in the console are Uncaught ReferenceError: require is not defined and Uncaught ReferenceError: Quill is not defined

@nebulous75 ah there we go

import Quill from 'quill/quill';

window.Quill = Quill; 

Regarding style sheets check here https://quilljs.com/guides/adding-quill-to-your-build-pipeline/#stylesheets

You can try those other imports for js from that page as well