Alpine.data with initial parameters doesn't work when registered from a bundle #1956

calvinps · 2021-08-16T20:47:46Z

calvinps
Aug 16, 2021

I am try to create a component via a registered Alpine.data object called "searchSelect" and pass it two initial parameters, but doing so throws the following error:

VM1868:3 Uncaught (in promise) ReferenceError: searchSelect is not defined
    at eval (eval at generateFunctionFromString (module.esm.js:1), <anonymous>:3:16)
    at eval (module.esm.js?dd52:1644)
    at tryCatch (module.esm.js?dd52:1668)
    at evaluate (module.esm.js?dd52:1598)
    at eval (module.esm.js?dd52:2809)
    at Function.eval (module.esm.js?dd52:1931)
    at flushHandlers (module.esm.js?dd52:1704)
    at stopDeferring (module.esm.js?dd52:1708)
    at deferHandlingDirectives (module.esm.js?dd52:1711)
    at initTree (module.esm.js?dd52:1887)

I registered it like this:

import searchSelect from './search-select.js'
Alpine.data('searchSelect', searchSelect)

The search-select.js file looks like this:

export default (searchCallback = "", selectedCallback = "") => ({
    init() {
        console.log('search select inited');
    },
   ...
})

and finally am calling it my html like so:

<div x-cloak x-data="searchSelect('searchEndpoint','selectedEndpoint')" >

If I remove the parameters and just call it like this x-data="searchSelect" then the component does get created (with the initial parameters missing). This leads me to believe there is a bug with creating components when x-data references a function e.g. x-data="searchSelect()" instead of a variable e.g. x-data="searchSelect"

For reference, I am on alpinejs v3.0.6 and am using alpinejs within a Laravel Livewire project.