sergio
September 22, 2021, 6:43pm
1
Here’s the snippet Segment is giving me:
<script>
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="rV4X85dnTrGEcrOo7jQ28eoBTTDBJLUB";;analytics.SNIPPET_VERSION="4.15.3";
analytics.load("123123123");
analytics.page();
}}();
</script>
How can I use this snippet in my root.html.heex template?
It’s not compiling:
== Compilation error in file lib/gaming_web/views/layout_view.ex ==
** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/gaming_web/templates/layout/root.html.heex:13:676: expected attribute value or expression after =
(phoenix_live_view 0.16.3) lib/phoenix_live_view/html_tokenizer.ex:342: Phoenix.LiveView.HTMLTokenizer.handle_attr_value_begin/5
sergio
September 22, 2021, 7:58pm
2
To solve this I moved the snippet to app.js
however this isn’t a good fix.
I fixed it by formatting the code, and changing one line:
from:
for (var e = 0; e < analytics.methods.length; e++) {
to:
for (var e = 0; analytics.methods.length > e; e++) {
sergio
January 31, 2022, 8:34pm
4
That’s strange - does anyone know why it would fail in one way and work the other way?
axelson
January 31, 2022, 10:22pm
5
1 Like
The formatting solved the issue around the = sign, so I don’t know what that was. The other issue I got, I think was related to it parsing the less-than sign (<) as a tag opening. Reversing it to a greater-than seems to have gotten past the parser. Just a hack.
Like @axelson pointed out - upgrading to latest {:phoenix_live_view, "~> 0.17.6"}
(as of today) will fix many html validation issues in heex.
opened 11:26PM - 27 Jan 22 UTC
closed 07:39AM - 28 Jan 22 UTC
### Environment
* Elixir version (elixir -v): `Elixir 1.13.2 (compiled with E… rlang/OTP 24)`
Erlang/OTP 24 [erts-12.0.3] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit]
* Phoenix version (mix deps): `1.6.6`
* Phoenix LiveView version (mix deps): `0.16.4`
* Operating system: macOS 11.6.1
* Browsers you attempted to reproduce this bug on (the more the merrier): N/A - compilation error
* Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes
### Actual behavior
I have a `.html.heex` layout template with a `<script>` tag that contains a `for` loop, that contains the common `i < foo.length` comparison.
The heex tokenizer wants to treat the the `<` as the start of an Elixir (or HTML?) tag, rather than recognize that it's part of a JavaScript expression.
I get the following error, which seems to indicate that it's expecting an Elixir token, rather than recognizing it as JS:
```sh
(Phoenix.LiveView.HTMLTokenizer.ParseError) invalid attribute value after `=`.
Expected either a value between quotes (such as "value" or 'value') or an Elixir
expression between curly brackets (such as `{expr}`)
Stacktrace:
│ (phoenix_live_view 0.16.4) lib/phoenix_live_view/html_tokenizer.ex:340: Phoenix.LiveView.HTMLTokenizer.handle_attr_value_begin/5
│ (phoenix_live_view 0.16.4) lib/phoenix_live_view/html_engine.ex:90: Phoenix.LiveView.HTMLEngine.handle_text/3
│ (eex 1.13.2) lib/eex/compiler.ex:49: EEx.Compiler.generate_buffer/4
│ (phoenix_view 1.1.0) lib/phoenix/template.ex:410: Phoenix.Template.compile/3
│ (phoenix_view 1.1.0) lib/phoenix/template.ex:196: anonymous fn/4 in Phoenix.Template."MACRO-__before_compile__"/2
│ (elixir 1.13.2) lib/enum.ex:2396: Enum."-reduce/3-lists^foldl/2-0-"/3
│ (phoenix_view 1.1.0) expanding macro: Phoenix.Template.__before_compile__/1
│ lib/veeps_web/views/layout_view.ex:1: VeepsWeb.LayoutView (module)Elixir
```
I tried the same JS snippet in a `.ex` file with `~L` and `~E` -- no parser errors there, but the same issue was observed when using `~H`.
### Expected behavior
Recognize that the `<` in a `for` loop inside a `<script>` tag is JavaScript, not the start of an Elixir or HTML tag:
```js
for(var e = 0; e < myObj.subObj.length; e++) {
```
### Workaround
I am able to get passed this by simply reversing the order of the variables in the expression and changing the operator to `>`.
The error is resolved by changing the above to:
```js
for(var e = 0; myObj.subObj.length > e; e++)
```
opened 11:56PM - 30 Sep 21 UTC
closed 08:01AM - 01 Oct 21 UTC
### Environment
* Elixir version (elixir -v): 1.12.3
* Phoenix version (mix … deps): 1.6.0
* Phoenix LiveView version (mix deps): 0.16.4
* Operating system: MacOS 11.6
* Browsers you attempted to reproduce this bug on (the more the merrier): none
* Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: no
### Actual behavior
The project fails to compile on new .heex templates with the following JS embedded
```
<script type="text/javascript" nonce={@conn.assigns[:script_src_nonce]}>
window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
heap.load({heap_key});
</script>
```
The stacktrace is:
```
== Compilation error in file lib/portal_web/views/layout_view.ex ==
** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/portal_web/templates/layout/shareable.html.heex:38:674: expected attribute name
(phoenix_live_view 0.16.4) lib/phoenix_live_view/html_tokenizer.ex:252: Phoenix.LiveView.HTMLTokenizer.handle_attribute/5
(phoenix_live_view 0.16.4) lib/phoenix_live_view/html_engine.ex:90: Phoenix.LiveView.HTMLEngine.handle_text/3
(eex 1.12.3) lib/eex/compiler.ex:48: EEx.Compiler.generate_buffer/4
(eex 1.12.3) lib/eex/compiler.ex:80: EEx.Compiler.generate_buffer/4
(phoenix_view 1.0.0) lib/phoenix/template.ex:371: Phoenix.Template.compile/3
(phoenix_view 1.0.0) lib/phoenix/template.ex:165: anonymous fn/4 in Phoenix.Template."MACRO-__before_compile__"/2
(elixir 1.12.3) lib/enum.ex:2385: Enum."-reduce/3-lists^foldl/2-0-"/3
(phoenix_view 1.0.0) expanding macro: Phoenix.Template.__before_compile__/1
```
### Expected behavior
.heex templates with embedded JS compile without error.
### Context and Thanks
Beautifying the ugly JS here still causes an error but different messages at different locations. Sorry if this is expected but it doesn't seem like it should be failing on this case. Have a great evening, thank you for looking into this! If you need additional help and context, please let me know. Thanks again!
opened 03:35PM - 21 Dec 21 UTC
closed 03:49PM - 21 Dec 21 UTC
### Environment
* Elixir version (elixir -v): 1.12.2
* Phoenix version (mix … deps): 1.6.5
* Phoenix LiveView version (mix deps): 0.17.5
* Operating system: MacOS
* Browsers you attempted to reproduce this bug on (the more the merrier):
* Does the problem persist after removing "assets/node_modules" and trying again? Yes/no:
### Actual behavior
```heex
<%= for meter <- @meters do %>
<.live_component module={RowComponent} id={meter.meter_id} meter={meter} status={@statuses[meter.meter_id]}>
<% end %>
```
This silently doesn't render anything within the `for`.
### Expected behavior
Compile time error for missing closing tag `live_component`.
2 Likes