Pikaday is not defined in laravel livewire

I am using pikaday datepicker package in laravel and installed pikaday package using npm. After installing the package I have included require('pikaday/pikaday'); in my app.js and run the npm run dev to compile js.

After that, I have created a custom datepicker component like this:

<input
    x-data
    x-ref="input"
    x-init="new Pikaday({ field: $refs.input, format: 'MM/DD/YYYY', })"
    type="text"
    {{ $attributes }}
>

but I am getting this error:

app.js:1922 Uncaught ReferenceError: Pikaday is not defined
    at eval (eval at tryCatch.el.el (app.js:152), <anonymous>:3:36)
    at tryCatch.el.el (app.js:152)
    at tryCatch (app.js:139)
    at saferEval (app.js:147)
    at Component.evaluateReturnExpression (app.js:1762)
    at new Component (app.js:1518)
    at Object.initializeComponent (app.js:1919)
    at app.js:1864
    at app.js:1878
    at NodeList.forEach (<anonymous>)

app.js code:

require('./bootstrap');
require('alpinejs');
require('moment/moment');
require('pikaday/pikaday');


const $ = require("jquery");
const dragula = require('dragula/dragula');
const sortable = require('sortablejs/Sortable');
const axios = require('axios').default;

let draggedElement;
let setBlocks = {};

// Sidebar
openSidebar = (flag) => {
    let sidebar = document.getElementById('sidebar');
    flag ? sidebar.classList.add('hidden') : sidebar.classList.remove('hidden');

    if (flag === true) {
        document.getElementById('sidebar-close').style.display = 'none';
        document.getElementById('sidebar-open').style.display = 'block';
    } else {
        document.getElementById('sidebar-close').style.display = 'block';
        document.getElementById('sidebar-open').style.display = 'none';
    }
};

// Sortable
if ($('#dropArea').is(':visible')) {
    const dragArea = document.getElementsByClassName('dragArea');

    for (let i = 0; i < dragArea.length; i++) {
        sortable.create(dragArea[i], {
            group: {
                name: 'shared',
                pull: 'clone',
                put: false
            },
            sort: false,
            filter: '.ignore-elements',
            onChoose: function (evt) {
                getBlocks(evt);
            }
        });
    }

    sortable.create(dropArea, {
        group: {
            name: 'shared',
            pull: 'clone',
        },
        sort: true,
        store: {
            set: function (sortable) {
                let blockData = sortable.el.childNodes;

                for (let index = 0; index < blockData.length; index++) {
                    let uid = blockData[index]['id'];
                    let html = blockData[index]['innerHTML'];

                    if (index === blockData.length - 1) {
                        setBlocks[index] = { 'uid': uid, 'html': html }
                        updateBlocks(setBlocks);
                        console.log(setBlocks);
                    }
                }
            }
        }
    });

    // Get blocks HTML
    getBlocks = (evt) => {
        axios.get('/api/getBlocks/' + evt.item.id).then(function (response) {
            evt.item.innerHTML = response.data[0].html;
        }).catch(function (error) {

        });
    };

    // Update blocks HTML
    updateBlocks = (blocks) => {
        axios.post('/api/setBlocks', {
            user_id: $('meta[name="uid"]').attr('content'),
            blocks: blocks
        }).then(function (response) {

        }).catch(function (error) {

        });
    }
}

I am not able to find the issue so can someone guide me on what is the issue.

You need to attach your Pikaday instance to the window so that it can be used.

You can either attach it directly, or create a variable for Pikaday in the event you need to use it elsewhere.

resources/js/app.js

let Pikaday = require ('pikaday/pikaday');
window.Pikaday = Pikaday;