Phoenix 1.6-rc-0 upgrade error

Phoenix Forum Questions / Help
1

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

2

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

3

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)

4

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

5

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…

6

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

7

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

is this allowed ?

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

8

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…

9

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
10

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)

11

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