Using your own build of Alpine

[mokhosh]

After finding the need to build my own version of Alpine temporarily here #2329 here's what I did:

• forked alpinejs repo
• cloned my forked on my local
• made the changes
• npm install
• npm run test all passing
• npm run build
• tried importing all four generated js files in the dist folder

Only the esm one compiled properly, and when I open my application I get warnings and errors and seems like many things are not defined (catch is not a function, my x-data variables aren't defined, etc.)

Am I missing a step or something?

Node v17.1.0
NPM v8.1.2

[danddanddand]

• The catch is not a function points to your transpile target needing to be higher es2017+
• In your own project, if you are using cdn version, you should just be able pull out of the dist folder. If you are bundling (webpack/parcel/vite/esbuild/whatever), you should copy the alpinejs folder from the alpine project somewhere local to project and edit your package.json to point to the local version. Something like this "alpinejs": "file:./alpineDebug/alpinejs",. Nuke your node_modules, and try build.

[mokhosh]

Ok, did all that just now.
That went back to transpiling to es5 and giving me the .catch is not a function error, and I assume it's because alpinejs is not really in node_modules and it's symlinked to alpineDebug.

[danddanddand]

It is in node_modules it's just not installing it from npm repository it's installing it from your local forked copy.

[mokhosh]

i know bro, but it doesn't copy, it just creates a symlink.
i just looked into it and it's a known issue with npm.
so the problem in both cases was creating symlink.
when i put it in a different directory because it was not in my project root folder it was not transpiled but it was also not finding necessary dependencies.
and when i put it in my project folder like you suggested webpack thought it should transpile it because it doesn't look like external code and i got the initial error.

either way, i'm stuck between extremely unfortunate decisions of npm and webpack and mix, etc.
my only option is to copy page cdn codes i think.

thanks anyway guys.

[danddanddand]

Webpack should transpile it, just not to target that mix is going via Babel. Try bundling with esbiuld instead if mix and see what it gives you.

[mokhosh]

I'm sure that will give me a working output, it's just a lot of change for one temporary fix until a new alpine release.

Thank you so much for walking me through this.