Using script tags in HEEX does not work?

Questions / Help
,
1

I’ve been converting my EEX and LEEX to HEEX and so far it’s been working fine. But I ran into one problem that I couldn’t figure out.

If you have some javascript with string interpolation (e.g. to set a token), it throws errors about it.

Is HEEX intended to support <script> tags?

I was trying to do something like this:

<script>
  fun("<%= @token %>");
</script>

I also tried this:

<script>
  fun({@token});
</script>

The error is:

UndefinedFunctionError{arity: 1, function: :init, message: nil, module: AllegroWeb.Router, reason: nil}, [{AllegroWeb.Router, :init, [[]], []}, {AllegroWeb.Endpoint, :plug_builder_call, 2, [file: 'lib/allegro_web/endpoint.ex', line: 1]}, {AllegroWeb.Endpoint, :"call (overridable 3)", 2, [file: 'lib/plug/debugger.ex', line: 132]},

I know it looks weird that it can’t find Router.init, but I can confirm that is truly the error that happens, and if I change it back to leex it works fine again.

Thanks!

3 
<script>
  <%= render_script(@token) %>
</script>

defp render_script(token) do
  ~E"fun(<%= token %>)"
end

Might be not ideal, but that seems to work for me.

4

is fun an Elixir function? If so, that should be inside the <%= %>, not outside.

I have script tags which are calling Elixir functions in several of my heex templates - no issues so far.

5

Ah, I didn’t make that clear. It’s a JavaScript function.

6

Can you do something like this?

<script>
  const myToken = "<%= @token %>";
  fun(myToken);
</script>
7

I would use hooks for this and not this sort of thing.

1 Like
8

This is a minor problem for me as well, I’ve got some integrations in a phoenix (non-liveview) app such as Posthog which requires a block such as:

<script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('TOKEN_HERE',{api_host:'https://app.posthog.com'})
</script>

When putting this into a .heex file it just gives the error

expected attribute name

I’ve just pulled it out into it’s own .eex file for now but it’s the only one left in my project unless I can figure out a more elegant solution. Any suggestions?

I’m not quite sure if this falls into the “bug” category but it certainly makes some things like this a bit more tricky, especially when various integrations provide this copy and paste block which a lot of people would hope “just works”. I could pull this into it’s own JS file I suppose but it feels like it adds some friction just to people using heex that eex or other systems don’t suffer from.

Apologies for reviving a slightly older thread, I thought it better for people searching this in the future to have a single thread to land on.

9

Where is it you’re putting this? root.html.heex? Somewhere else? And just to be clear, is that error from Elixir or JavaScript?

10

Heex performs html validation and there were few bugs in its html validation. You might be experiencing this bug:

Check the version of phoenix_live_view you are using. Upgrading to the latest {:phoenix_live_view, "~> 0.17.6"} will help - many html validation bugs have been fixed in recent releases.

If problem still exists after upgrading to latest - log a bug on phoenix_live_view repository.

Previous discussion in the forum: