How to set up Alpine.js 3 with mix

user_96944 0
Viewed 4355

I am having trouble getting started with Alpine.js v3 in a new project. This is my package.json and Alpine setup:

  "devDependencies": {
    "laravel-mix": "^6.0.19"
  },
  "dependencies": {
    "alpinejs": "^3.0.6"
  }

import Alpine from 'alpinejs'

window.Alpine = Alpine
window.Alpine.start()

Alpine.data('demo', () => ({
    open: false,

    toggle() {
        this.open = !this.open
    }
}))

driving this markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <script src="assets/app.js"></script>
  </head>
  <body>
    <div x-data="demo">
      <button @click="toggle">Expand</button>

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

and I build my javascript using laravel-mix:

// webpack.mix.js

let mix = require('laravel-mix');

mix
    .setPublicPath('public')
    .js('src/app.js', 'public/assets');

The javascript build fine and the page loads without errors, but when I click the toggle button, the content expands as expected, but I get the following error in the browser console and the content won't hide on subsequent clicks.

Uncaught (in promise) TypeError: i is not a function app.js:2282:28

If I defer my script or move it to the bottom, the page is broken on load and I get the following:

Uncaught TypeError: undefined is not a non-null object app.js:1995:12

Can anyone help me fix my setup?

alpine.js laravel-mix node-modules
1 Answers

Most likely you just forget to add defer attribute to script tag

<script defer src="assets/app.js"></script>

But also as documentation says

If you imported Alpine into a bundle, you have to make sure you are registering any extension code IN BETWEEN when you import the Alpine global object, and when you initialize Alpine by calling Alpine.start().

So change your script to

import Alpine from 'alpinejs';

Alpine.data('demo', () => ({
    open: false,

    toggle() {
        this.open = !this.open
    }
}));

window.Alpine = Alpine;

// should be last
Alpine.start();

Note: if there are some errors like assignment to undeclared variable data you may change your import to import Alpine from 'alpinejs/dist/module.cjs';

user_143050760
Related