Unable to use mixins, "Script error" error is all I can see

[Atulin]

I'm fiddling around with Alpine (v3.2.1), and I'm having trouble getting mixins to work. The only message I get in the console is "Script error." which is not very useful...

https://jsfiddle.net/cz683v0w/

<div x-data="{...dat(), bar: 'world'}">
  <h1 x-text="foo"></h1>
  <h2 x-text="bar" @CL#8577ick="baz()"></h2>
</div>

function dat() {
  return {
    foo: 'hello',
    baz() {
      console.log('aboogabooga');
    }
  }
}

---

Edit: it seems this is the culprit, a breaking change in v3 that made the whole shebang overcomplicated and entirely reliant on magic strings. Just what I love, zero static analysis, hoo boy.

---

Edit 2: Gritted my teeth and updated the code to

document.addEventListener('alpine:init', () => {
	Alpine.data('dat', () => ({
      foo: 'hello',
      baz() {
        console.log('aboogabooga');
    }
  }))
})

and the result is...

---

Edit 3: I decided to use it locally instead, thinking perhaps it's the fault of JSFiddle, but it's not rainbows and butterflies in here either.

<div x-data="{...dat, bar: 'world'}">
    <h1 x-text="foo"></h1>
    <h2 x-text="bar" @click="baz()"></h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.js" defer></script>
<script src="./script.js"></script>

document.addEventListener('alpine:init', () => {
    console.log(Alpine);
    Alpine.data('dat', () => ({
        foo: 'hello',
        baz() {
            console.log('aboogabooga');
        }
    }))
})

prints the Alpine object to the console, but is promptly followed by

VM295:3 Uncaught (in promise) ReferenceError: foo is not defined
    at eval (eval at generateFunctionFromString (cdn.js:364), <anonymous>:3:32)
    at cdn.js:375
    at tryCatch (cdn.js:399)
    at cdn.js:2193
    at reactiveEffect (cdn.js:861)
    at Object.effect2 [as effect] (cdn.js:836)
    at effect (cdn.js:44)
    at wrappedEffect (cdn.js:60)
    at Function.<anonymous> (cdn.js:2192)
    at flushHandlers (cdn.js:435)

and

VM297:3 Uncaught (in promise) ReferenceError: baz is not defined
    at eval (eval at generateFunctionFromString (cdn.js:364), <anonymous>:3:16)
    at cdn.js:375
    at tryCatch (cdn.js:399)
    at cdn.js:2499
    at handler3 (cdn.js:1970)
    at cdn.js:2011
    at HTMLHeadingElement.<anonymous> (cdn.js:1972)

when clicking an element

[Pronian]

I believe the issue is in the script load order. In the first example, the JS runs after the HTML. And in the second example it will work if you change the code to:

<div x-data="{...dat(), bar: 'world'}">
  <h1 x-text="foo"></h1>
  <h2 x-text="bar" @click="baz()"></h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.js" defer></script>

<script>
  document.addEventListener('alpine:init', () => {
    console.log(Alpine);
    Alpine.data('dat', () => ({
      foo: 'hello',
      baz() {
        console.log('aboogabooga');
      }
    }))
  })
</script>