Creating an addon with AlpineJS (not working)

Add-ons Development
,
1

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">
<head>
  ...
  <script defer src="./../../dist/js/cdn.min.js"></script>
  ...
</head>
<body>
    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
</body>
</html>

image
image1105×359 8.89 KB

2

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: https://github.com/alpinejs/alpine/issues/237#issuecomment-985996766

Edit: presumably this https://github.com/alpinejs/alpine/tree/main/packages/csp (it probably also won’t support the x-data notation and instead you’ll have to define that in JS?)

3

@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 (https://github.com/alpinejs/alpine/discussions/1929).
More: https://alpinejs.dev/advanced/csp

1 Like