Phoenix support for `import Alpine from @alpinejs/csp` for Alpine.js V3


I was wondering if Phoenix is planning to implement support for the module import of Alpine’s new csp build?

This is the guide on the module import of the CSP-friendly build:

import Alpine from '@alpinejs/csp'

window.Alpine = Alpine

This is the module import for the standard build, which works:

import Alpine from 'alpinejs'

window.Alpine = Alpine


The module import for the csp build currently returns a cannot find module @alpinejs/csp error in the console.

If I implement the normal import call for V3, import Alpine from 'alpinejs'…, everything works great, just seems that I can’t yet import the CSP-friendly build this way (I think the CDN might work?).

Excited to use the CSP-friendly build via the module import. :blush: Thank you :heart:

This really is more a javascript question than a Phoenix question—there’s nothing particularly related to Phoenix in all this. I suspect that the issue you’re experiencing is because you installed alpinejs with npm install, not @alpinejs/csp. Try running npm install @alpinejs/csp (in your assets directory) and see if that fixes your problem.

1 Like

Thank you, yes good point this probably isn’t a Phoenix question. Sorry about that. Unfortunately, I had tried that already and it doesn’t work. According to the Alpine docs, it doesn’t appear like that is the route you need to go once you do the normal install for V3. But, you’re probably right and it’s more a question for Alpine and not Phoenix. Sorry and thanks!

@f0rest8 it seems this package is not yet published.

Just stumbled upon this comment from 2 days ago: Improve Security Awareness · Issue #237 · alpinejs/alpine · GitHub

And indeed npm search yields no results as right now: @alpinejs/csp - npm search

Probably it will get published very soon…

By the way it is great Alpine is finally getting CSP-friendly! :tada: That was my only concern about the PETAL stack.

1 Like