Uncaught TypeError: import_alpine.default.start is not a function

The context of how I get to this point can be found here: Alpine.js loaded 2 times

The Alpine.js you downloaded from the CDN is not a module.

When I tried it the way you did, esbuild complained exactly about that.

If you want to use it as a module, then you need to either use npm to isntall it or clone from GitHub and build it, though it has dependencies, which are usually pulled from NPM (the service).

There might be ways to vendor them, though that will again require extra work, and might recurse infinitely, as dependencies have the habbit to also have dependencies.

Okay, I have to admit, the list is short for alpine, its about a handfull of deps. But its still annoying.

So perhaps you can use npm (the tool) or yarn to use alpine from GitHub? Though I am not sure how that will deal with dependencies and if you can override transient dependencies to use GitHub instead of NPM (the service).

Thanks for your info. You seem to be quite knowledgeable about JavaScript and related tech.

Do you know about some one-file replacement to Alpine? Something I can import from the vendor folder like that topbar.js? I was thinking about Petite Vue but I have not enough knowledge with JS tech, unlike you.

Thank you in advance for your opinion.

I’m not any knowledgeable in the JS ecosystem, but I just went through a similar process as you, as I wanted to try to avoid NPM (the tool).

I now built alpinejs once from source and vendored the resulting module in the project.

I also added a small script which I could pass in a version number and it would rebuild in a container and then replace the vendored module.

This way I can avoid using NPM (the tool) on a daily basis.

I have no problems with NPM (the service), similar to how I do not have problems with hex.pm. If you do not trust one of the package services, you can’t trust any other.

Bumped into this today and didn’t want to resort to using npm.

Vendoring Solution:

• Browse the available files in https://www.npmjs.com/package/alpinejs?activeTab=code. I went with dist/module.esm.min.js.
• Download the file using any of the CDNs that proxy NPM like https://unpkg.com/ and https://www.jsdelivr.com/. For UNPKG the path should look like https://unpkg.com/:package@:version/:file.

wget -O assets/vendor/alpinejs.js https://unpkg.com/alpinejs@3.15.2/dist/module.esm.min.js

• Import the package

import Alpine from '../vendor/alpinejs'