Creating an addon with AlpineJS (not working)

I want to use AlpineJS inside my addon. It’s not working after being loaded as a temporary extension, but if I launch the index.html of my sidebar component in the browser, the code executes correctly. What am I missing?

index.html / AlpineJS

<html lang="en">
  <script defer src="./../../dist/js/cdn.min.js"></script>
    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>

It appears that the framework relies on using eval/Function to parse some of the information you provide it. However that is not allowed inside Firefox extensions (thus the CSP errors). Apparently AlpineJS v3 has a build that would work in extensions:

Edit: presumably this (it probably also won’t support the x-data notation and instead you’ll have to define that in JS?)

@freaktechnik thank you for pointing me in the right direction.

There is a CSP-friendly build, but it’s not included in the NPM package (

1 Like