AlpineJS directives fail to execute in production while working locally

Resolution

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.

CSP-Safe Build vs. Nonces

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.

Version Requirements

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.

Implementation Steps

1. Swap the Bundle: Replace your current Alpine.js script source with the CSP-safe version. If using a CDN, ensure you are targeting the csp build variant.
2. Maintain Defer: Keep the defer attribute on your script tag to ensure the DOM is fully parsed before Alpine initializes.
3. Verify Header: Ensure your production CSP header remains strict (omitting 'unsafe-eval') to confirm the fix is working as intended.

Verification

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.

Diagnostic Requirement

Are you using a custom build process (e.g., Webpack, Vite, or a specific HTML minifier) to bundle your production assets?