Importing npm dependencies with Webpack and Shopify

[UnleashedMySelf]

@Accudio

Hello! I'm trying to remake my shopify project from standard alpine to your async-alpine methods, but I'm having some trouble importing swiper at least...

I'm using a webpack (shopify theme lab) and I saw your webpack implementation (https://stackblitz.com/edit/async-alpine-webpack), but for shopify we can use this path for files.

How we just can import Swiper in this way, that it loads only on view? we already install it via npm but don't want it to load imediatly

In general the question is how do we import additional packages into alpineJS's asynchronous script files?

Maybe you already have a solution for this problem, please help :)

some images we tried..

[Accudio]

Hi @UnleashedMySelf!

The problem you're asking isn't really related to Async Alpine as it just loads the files rather than handling anything like imports.

You're going to need to use Webpack in order to bundle imports from npm, so you can't just import the file directly using ax-load-src, you'll need to run it through Webpack first.

The easiest way of doing that is using AsyncAlpine.data and Webpacks dynamic import() which I think should work on Shopify still, without using asset_url.

Alternatively what I do on the Shopify sites I work on is to set up my bundler to process the component files separately from the main bundle and output them to the assets directory. This however would involve changing Webpacks config in order to set that up and to output them as ES Modules. That's unfortunately not particularly easy to do.

[UnleashedMySelf]

@Accudio

thanks for answer! I also using a single bundle.js file for project, but now I want to separate all my components into separate files in assets and if I don't have an imports inside of each separated files - it works good! However when I have imports (like a swiper), there are problems.

I can just import from cdn or my shopify assets and then everything works, but I want to install packages from npm :)

[UnleashedMySelf]

@Accudio

Yes! we can use it like this: AsyncAlpine.data("swiperSlider", () => import("./alpine/components/swiper-sliders")); and it works, thanks!!
I think we need to set the path to the file from the assets, but we can just set the path to our components in alpineJS... a very stupid mistake on my part

[Accudio]

Yeah so I think that Webpack should load the Shopify file in assets absolutely fine.

It's not quite so good for caching, as if your component changes with the Webpack system the entire bundle needs cleared from the cache whilst the Shopify URL can just clear the component file.

That's a relatively minor detail though and makes it SO much easier to implement.

[Accudio]

I've edited the discussion title to be more specific to this instance, to help anyone who has the same problem.

[Accudio]

I've put together a GitHub Gist that combined with Async Alpine 2 makes use with Shopify and bundling much easier.

This example uses Laravel Mix (based on Webpack but with alternative syntax) but should be possible to adapt to other bundlers with at least some of the key functionality.

With the code here you can just drop a JS component file into /async/ and then reference it with x-data="[filename]" and Webpack will hook it up and it'll get the correct URL from the Shopify CDN.
Assigning __webpack_public_path__ to Shopify's assets directory means Webpack will load the correct URL which was previously tricky.

https://gist.github.com/Accudio/35e17148732e7c26400a2d70e4dbf3b0