Importing 3rd-party scripts (Lodash)

[smarterdigitalltd]

Hi 👋

Async Alpine is working wonderfully and has helped solve the problem of an increasingly large bundle size on my WordPress website.

One thing I'm noticing is more of an inconsistency rather than a bug or issue.

Assuming the following file structure:

• scripts/frontend.js
• scripts/components/some-component.js

Within frontend.js, I import and boot Alpine, as well as importing and registering AsyncAlpine:

frontend.js:

import AsyncAlpine from "async-alpine"
import Alpine from "alpinejs"

Alpine.plugin(AsyncAlpine)

Alpine.asyncData('someComponent', () => import('@scripts/components/some-component.js'))

Alpine.start()

Now, in some-component.js, I require debounce from Lodash.

some-component.js:

import { debounce } from "lodash"

export default function someComponent() {
    return { // methods in here are using debounce() }
}

With the code as above, debounce is seemingly not available and I get console errors/broken scripts. Prior to switching to AsyncAlpine, it was.

Note: My build step is fine; it's just in the browser that it's not working.

If, however, I update frontend.js to the following:

frontend.js:

import lodash from "lodash" // <<
import AsyncAlpine from "async-alpine"
import Alpine from "alpinejs"

Alpine.plugin(AsyncAlpine)

Alpine.asyncData('someComponent', () => import('@scripts/components/some-component.js'))

Alpine.start()

Lodash then works fine in some-component.js

Interestingly, I'm not observing the same behaviour with other libraries such as GSAP, js-cookie etc.

It's not a problem - just a minor inconvenience where, given lodash isn't directly used in frontend.js, my IDE will try and remove it when I save 🙂

I just thought I'd mention it in case it was something worth looking at.

[Accudio]

Hey @smarterdigitalltd!

Thanks for dropping this in, all the signs are pointing to this being related to your build setup. It appears that for whatever reason it's not importing and bundling the lodash methods with your some-component.js file.

Could you conform what you mean by "Note: My build step is fine; it's just in the browser that it's not working."? Do you mean that the some-component.js is correctly bundled with the lodash dependency?

I've used this pattern with importing libraries — including lodash — in components using .asyncData with both Vite and Laravel Mix in the past without issue. If you can create a simple test repo then I can take a look and see if I can track down what's causing this?

[Accudio]

Closing due to inactivity, happy to re-open with a reproducible test repo and some more info.