Phoenix 1.6-rc-0 upgrade error

Hello

upgrading 1.5.12 to 1.6 following these instructions phx-1.6-upgrade.md · GitHub

(but leaving the webpack build intact) works before I rename root to heex

after the root.html.heex rename and syntax adjustments

I get this strange error which comes from the

use WepAppView, :view

at the top of the LayoutViewModule even when this module is empty except from the use instruction

(TokenMissingError) nofile:10:98: missing terminator: ) (for “(” starting at line 10)
(phoenix_live_view 0.16.3) lib/phoenix_live_view/html_engine.ex:376: Phoenix.LiveView.HTMLEngine.group_attrs/2
(phoenix_live_view 0.16.3) lib/phoenix_live_view/html_engine.ex:342: Phoenix.LiveView.HTMLEngine.handle_tag_attrs/5
(elixir 1.12.2) lib/enum.ex:2385: Enum."-reduce/3-lists^foldl/2-0-"/3
(eex 1.12.2) lib/eex/compiler.ex:48: 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.2) lib/enum.ex:2385: Enum."-reduce/3-lists^foldl/2-0-"/3
(phoenix_view 1.0.0) expanding macro: Phoenix.Template.before_compile/1
lib/xintranet_web/views/layout_view.ex:1: XintranetWeb.LayoutView (module)
(elixir 1.12.2) lib/kernel/parallel_compiler.ex:319: anonymous fn/4 in Kernel.ParallelCompiler.spawn_workers/7

the error was because there were concurrent heex and leex versions of root.html

still, after renaming other templates in the layout directory, that are rendered from root.html.heex
I get the error

function AppWeb.LayoutView.render/2 is undefined (module AppWeb.LayoutView is not available)

in fact this error means that there are somewhere in the renamed templates a syntax error as to heex new rules

but the heex engine message showing the error is not always displayed

try and restart the server and see if you can get the error message…

also some improvements have been made to error handling (Improve error message for ~H with attribute and interpolation · Issue #1584 · phoenixframework/phoenix_live_view · GitHub), can you update phoenix_live_view (mix deps.update phoenix_live_view should be enough) - and check…

finally another cryptic error wrom the webpack bundle

Uncaught SyntaxError: ‘#’ not followed by identifier

this time from javascript

after the upgrade I let the webpack stack which worked when using 1.5 phoenix untouched

Uncaught SyntaxError: ‘#’ not followed by identifier
generateFunctionFromString module.esm.js:1619
generateEvaluatorFromString module.esm.js:1624
normalEvaluator module.esm.js:1601
evaluateLater module.esm.js:1588
module.esm.js:2817
flushHandlers module.esm.js:1694
stopDeferring module.esm.js:1699
deferHandlingDirectives module.esm.js:1702
initTree module.esm.js:1888
start module.esm.js:1857
start module.esm.js:1856
app.js:21
js app.js:144
webpack_require app.js:20
0 app.js:225
webpack_require app.js:20
app.js:84
app.js:87

this may be because of interpolation in attributes of heex template tags

is this allowed ?

div x-data={"{ open: #{menu_open(@conn, “vvs”)}}"}

depends… does menu_open always return a boolean?

else you might end up with invalid js in alpine land… eg. {open: } lands into javascript code…

if menu_open returns a string you need ’ ’ around it like: div x-data={"{ open: '#{menu_open(@conn, "vvs")}'}"}

from the context I assume its a boolean, yet it’s not always returned - so guard it with an if:
div x-data={"{ open: #{if menu_open(@conn, "vvs"), do: true, else: false}}"}

also check the " " around vvs, they look very curly to me “” in your code…

all right so the #{} interpolation is not forbidden in the {} of an heex attribute
the function does always return true or false and looking into the generated page I saw the false

1 Like

I see, also check for accidental double hashmarks # #
eg if I put in:
<p x-data={"{msg: ##{get_flash(@conn, :non_existing)}}"} x-text="msg" >Alpine does not work :(</p>

I’ll get your exact error in the browser console (Uncaught SyntaxError: ‘#’ not followed by identifier)

ok I found the error there was an attribute somewhere that was not interpolated becasue the {} where like that

 :class="{ 'text-gray-400 rotate-90': #{@open}, 'text-gray-300': !(#{ @open} ) }"

instead of

 :class={"{ 'text-gray-400 rotate-90': #{@open}, 'text-gray-300': !(#{ @open} ) }"}

it gets a little complicated or hard to spot errors with alpinejs and heex
thanks you for your responses

3 Likes