Cannot initialize dropdowns with Alpine

[praveenjuge]

Cannot initialize dropdowns with Alpine

[mcama]

I confirm that setting the mode property to 'spa' (instead of mode: 'universal'), in nuxt.config.js, solves the issue with dropdowns.

[praveenjuge]

Hey, is kutty updated to the latest 0.2.0 version?
And if that didn't work, did you properly register the plugin in Nuxt config? example here

[mcama]

Yes, kutty is on the latest version. Regarding the plugin, I'm registering the script (also Alpine) in nuxt.config.js file, like this:

export default {
        ...,
        script: [
            {
                src:
                    'https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js',
                body: true,
            },
            {
                src:
                    'https://cdn.jsdelivr.net/npm/kutty@latest/dist/kutty.min.js',
                body: true,
            },
        ],
        ...
}

[praveenjuge]

alpine is already bundled with the kutty js, maybe that's the problem, can you remove the alpine script there and check?

[mcama]

I removed de alpine script but the error still persist. This the full error:

Uncaught ReferenceError: dropdown is not defined
    at eval (eval at l (kutty.min.js:1), <anonymous>:3:36)
    at l (kutty.min.js:1)
    at new he (kutty.min.js:1)
    at Object.initializeComponent (kutty.min.js:1)
    at kutty.min.js:1
    at kutty.min.js:1
    at NodeList.forEach (<anonymous>)
    at Object.discoverComponents (kutty.min.js:1)
    at Object.start (kutty.min.js:1)

Other components the use JS, such as dialogs, are working like a charm.

[praveenjuge]

No idea what the error is, can you share full code in a minimal repo? It will help me identify why this error occurs

[mcama]

Hi. I've just created a minimal repo (where the issue can be reproduced) and added you as a collaborator.
Again, thank you for your help.