I am using quill as my RTE in laravel/livewire app. Here is some of my code

I have installed quill-emoji using npm

My view file that loads the quill

<div class="w-full"
     wire:ignore
     x-data="{ removeImage: {{ isset($removeImage) ? ($removeImage ? 'true' : 'false') : 'false' }} }"
     x-init="function() {
        $load_script('{{ mix('js/quill.js') }}').then(() => {
            var toolbarOptions = <?php echo config('webbuilder.default-quill-options') ?>;
            if (removeImage) {
                toolbarOptions = toolbarOptions.map(option => {
                    if (Array.isArray(option) && option.includes('image')) {
                        return option.filter(item => item !== 'image');
                    }
                    return option;
                });
            }
            let quill = new Quill('#quill-{{ "article" }}', {
                placeholder: 'Compose message',
                modules: {
                    toolbar: toolbarOptions,
                    'emoji-toolbar': true,
                    'emoji-textarea': true,
                    'emoji-shortname': true,
                },
                theme: 'snow'
            });

            quill.on('text-change', () => {
                let QuillDiv = document.getElementById('quill-{{ "article" }}');
                let hidden   = document.getElementById('hidden-content-{{ "article" }}');

                hidden.value = QuillDiv.children[0].innerHTML;

                hidden.dispatchEvent(new Event('input', {
                    bubbles: true,
                    cancelable: true,
                }))
            });

            let defaultValue = @this.get('article');
            let delta = quill.clipboard.convert(defaultValue);

            quill.setContents(delta, 'silent')
        });
     }"
>
    <input type="hidden"
           wire:model.debounce.500ms="article"
           id="hidden-content-{{ "article" }}">
           
           <div id="quill-{{"article" }}"></div>
           <div class="my-2">
            <label class="text-gray-500">{{ "Note : Add link with prefix Https:// or Http://" }}</label>
           </div>
         

</div>

my js files that gets loaded quill.js

window.Quill = require('../../node_modules/quill/dist/quill.min');

my quill options for toolbar

    'default-quill-options' => "[
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'align': [] }],
        ['link', 'image'],
        ['emoji']
    ]"

I was trying to get emojis shown on my rte
but I get these errors

quill.js:2088 quill Cannot import modules/emoji-toolbar. Are you sure it was registered?
quill.js:2088 quill Cannot import modules/emoji-textarea. Are you sure it was registered?
quill.js:2088 quill Cannot import modules/emoji-shortname. Are you sure it was registered?

Can anyone tell me what I am doing wrong here?