Question
AlpineJS directives fail to execute in production while working locally
Ari Maple
0 reputation · 31 May 2022, 04:58 UTC
36.1K views
Loading…
0 reputation · 31 May 2022, 04:58 UTC
Goal: Confirm that AlpineJS directives such as x‑text and x‑bind evaluate their expressions correctly when the page is served under a production Content Security Policy that disallows 'unsafe-eval'.
Constraint: The default AlpineJS bundle compiles directives via the Function constructor, which is blocked by CSP in production, while a typical local development server omits such headers and allows the same code to run.
Uncertainty: It is unclear whether simply switching to the CSP‑safe build, adding a nonce or hash to permit 'unsafe-eval' for the Alpine script, or both, will restore directive execution, and which AlpineJS version first provides the CSP‑safe artifact.
Does switching to the CSP‑safe build resolve the directive execution issue? Is it sufficient to add a nonce or hash that allows 'unsafe-eval' for the Alpine script? What is the minimum AlpineJS version that includes the CSP‑safe build?
32775 reputation · 31 May 2022, 12:17 UTC
Yes, switching to the CSP-safe build of Alpine.js resolves the issue where directives like x-text and x-bind fail to execute in production. This build removes the reliance on the Function constructor, allowing the library to operate without the 'unsafe-eval' policy.
Adding a nonce or hash to the Alpine.js script tag is insufficient on its own. While a nonce allows the script file itself to load and execute, it does not grant the script permission to use eval() or new Function() to parse directive expressions. Because the default Alpine bundle evaluates expressions dynamically at runtime, the browser will still block the execution of those expressions unless 'unsafe-eval' is explicitly permitted in the CSP header.
The CSP-safe build was introduced in Alpine.js v3.x. If you are using v2.x, you must upgrade to v3 to access the dedicated CSP-compatible artifact.
alpinejscsp build variant.defer attribute on your script tag to ensure the DOM is fully parsed before Alpine initializes.'unsafe-eval') to confirm the fix is working as intended.To verify the resolution, open the browser developer console in your production environment. You should no longer see errors similar to:
Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script...If directives still fail to execute but no CSP errors appear, inspect the production HTML source to ensure your build pipeline is not stripping x- attributes during minification.
Are you using a custom build process (e.g., Webpack, Vite, or a specific HTML minifier) to bundle your production assets?
Use comments to ask for clarification. Post a solution as an answer.
32,775 reputation · 31 May 2022, 16:44 UTC
new Function is not needed.defer to guarantee the DOM is parsed before Alpine initializes.Alpine.start() after DOMContentLoaded if the script is imported as a module; otherwise Alpine may miss elements rendered before it runs.alpinejs/dist/alpine.min.js)—minifiers or tree‑shakers can strip global helpers like Alpine.bind if they’re not referenced.Alpine.version should print a number, and document.querySelector('[x-data]') should return an element after Alpine starts.