Install AlpineJS as a Module?

[btihen]

I have installed AlpineJS using the script tag in the header, but I would feel more comfortable if I could figure out how to install it as a module here is what I tried:

1. get the gem

gem install bridgetown -N -v 1.0.0.beta3

2. install/configure

bridgetown new apline_tail -t erb -c purgecss,tailwindcss
cd apline_tail

3. install aplineJS using the info: https://alpinejs.dev/essentials/installation

npm install alpinejs

4. import Alpine into your bundle and initialize it like so - I first tried making frontend/javascript/index.js look like:

// frontend/javascript/index.js
import "index.css"
// Import all JavaScript & CSS files from src/_components
import components from "bridgetownComponents/**/*.{js,jsx,js.rb,css}"

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
console.info("Bridgetown is loaded!")

As I figured this file is already in the bundle pipleline so should work.

So I added a very simple alpinejs / html to the bottom of src/_components/shared/navbar.erb

<div x-data="{ open: false }">
  <button
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    x-on:click="open = ! open"
    x-text="! open ? 'Expand' : 'Close'">
  </button>

  <span x-show="open">
    Content...
  </span>
</div>

Nothing happens.

But if I add: <script src="//unpkg.com/alpinejs" defer></script> to src/_partials/_head.erb everything is fine.

So I figured I needed to do something with the esbuild.config.js file - but I am not sure what.

Can someone point me in the correct direction?

Also I would be glad (with a little guidance) to turn this into a config option once it is working.

[jaredcwhite]

@btihen Hmm, I'll have to dig into this…seems like it "should just work" but maybe there's an extra hoop to jump through.

[btihen]

Cool - I'll be glad to test or explore any ideas you'd like.

[NotsoJharedtrollOx17]

For some odd reason, just the external link works.

I found a workout that is copying and pasting the CDN file content into a local file that is referred inside the HTML page

AlpineJS CDN File

Hope it helps. And Happy New Year too ^^

[KonnorRogers]

Silly question, did you make sure to add "defer" to the script tag in head?

I'll see if I can repro this tomorrow

[woller]

Did you manage to reproduce it? I've got the exact same issue. I'm on bridgetown 1.2.0 and this is my package.json. Pretty much the same setup as above. I also use TailwindCSS in the app.

{
  "name": "woller.dev",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "esbuild": "node esbuild.config.js --minify",
    "esbuild-dev": "node esbuild.config.js --watch"
  },
  "devDependencies": {
    "esbuild": "^0.15.12",
    "glob": "^8.0.1",
    "postcss": "^8.4.12",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^14.1.0",
    "postcss-load-config": "^4.0.1",
    "postcss-preset-env": "^7.4.3",
    "read-cache": "^1.0.0",
    "tailwindcss": "^3.2.4"
  },
  "dependencies": {
    "alpinejs": "^3.11.1"
  }
}

Further weirdness: I am able to access window.Alpine in the console, but Alpine.start() in index.js throws an error:

Uncaught TypeError: func(...).catch is not a function
    generateEvaluatorFromString module.esm.js:489
    tryCatch module.esm.js:409
    evaluate module.esm.js:434
    <anonymous> module.esm.js:2771
    skipDuringClone module.esm.js:1193
    flushHandlers module.esm.js:575
    stopDeferring module.esm.js:580
    deferHandlingDirectives module.esm.js:583
    initTree module.esm.js:778
    start module.esm.js:733
    start module.esm.js:732
    <anonymous> index.js:10
    <anonymous> index.VG7IJTK3.js:2989
[module.esm.js:489:46](http://localhost:4000/node_modules/alpinejs/dist/module.esm.js)
    generateEvaluatorFromString module.esm.js:489
    tryCatch module.esm.js:409
    bind_applyFunctionN self-hosted:1686
    tryCatch self-hosted:1643
    evaluate module.esm.js:434
    <anonymous> module.esm.js:2771
    skipDuringClone module.esm.js:1193
    bind_applyFunctionN self-hosted:1686
    <anonymous> self-hosted:1643
    flushHandlers module.esm.js:575
    stopDeferring module.esm.js:580
    deferHandlingDirectives module.esm.js:583
    initTree module.esm.js:778
    start module.esm.js:733
    forEach self-hosted:203
    start module.esm.js:732
    <anonymous> index.js:10
    <anonymous> index.VG7IJTK3.js:2989
Uncaught ReferenceError: message is not defined
    anonymous index.VG7IJTK3.js line 499 > Function:3
    generateEvaluatorFromString module.esm.js:489
    tryCatch module.esm.js:409
    <anonymous> module.esm.js:2714
    reactiveEffect module.esm.js:1646
    effect2 module.esm.js:1621
    effect module.esm.js:48
    wrappedEffect module.esm.js:64
    <anonymous> module.esm.js:2713
    flushHandlers module.esm.js:575
    stopDeferring module.esm.js:580
    deferHandlingDirectives module.esm.js:583
    initTree module.esm.js:778
    start module.esm.js:733
    start module.esm.js:732
    <anonymous> index.js:10
    <anonymous> index.VG7IJTK3.js:2989

[ghost]

update your esbuild.config.js with the following:

const esbuildOptions = {
    target: 'es2017'
}