Phoenix generated LiveView is not working

Phoenix Forum Questions / Help
,
1

As Phoenix LiveView is going to be 1.0 soon I decided to start learning and hit an issue immediately. I tried to recreate from scratch but no success.

Elixir 1.17.0 (compiled with Erlang/OTP 27)

      {:phoenix, "~> 1.7.14"},
      {:phoenix_live_view, "~> 1.0.0-rc.1", override: true},

Here is what I did:

mix phx.new station_eleven
mix setup
mix phx.gen.live Words Word words word:string translation:text
mix ecto.migrate

Also added routes and navigated to http://localhost:4000/words

When I press New button I get errors:

only HTML element tags are allowed at the root of components.

got: "<StationElevenWeb.WordLive.FormComponent.render>

utils.js:7 only HTML element tags are allowed at the root of components.

got: "</StationElevenWeb.WordLive.FormComponent.render>"

utils.js:7 unknown hook found for "Phoenix.FocusWrap" 

<div id="word-modal-container" phx-hook="Phoenix.FocusWrap"

In case you want to take a look at full code:

2

I downloaded that code, but I cannot reproduce the error you’re seeing.

This suggests that something is going wrong with the JS bundle, as that hook should be defined by the framework :thinking:

3

Thanks for replying!

Could it be node version or something? I remember previously Phoenix was locked with pretty old one.
Could you please share your versions and how do you prepare/start application?

I’m on nodejs v22.2.0.

Maybe some idea how to debug this?

4

Modern versions of Phoenix use esbuild to sidestep the Node ecosystem entirely; I don’t have a node executable anywhere on PATH when running your application.

I don’t have a theory about why it might help, but a good place to start with troubleshooting would be to remove the _build directory and the priv/static/assets directory. Both are safe to delete because they’re generated automatically when needed, and can cause unreproducible weird behavior when they’re somehow messed up.

5

Actually I tried that already and it didn’t help.

6

Here are my current investigations.

priv/static/assets/app.js - has no FocusWrap after build, but has

var Hooks = {
    LiveFileUpload:...
    LiveImgPreview:...
}

So I tried some hackish way:

  1. removed priv/static/assets/app.js
  2. removed _build/dev
  3. removed all files in deps/phoenix_live_view/priv/static except phoenix_live_view.js
  4. made phoenix_live_view.js blank
  5. removed everything in deps/phoenix_live_view/assets/js
  6. run mix assets.build
  7. checked priv/static/assets/app.js and it has 2 hooks again.

Now I have no idea where it takes JS from. There is no JS code which contains LiveFileUpload in project directory.

7

I’m now in the internals of esbuild package, here are options passed to System.cmd:

Running esbuild with args: [
  "js/app.js", "--bundle", "--target=es2017", "--outdir=../priv/static/assets",
  "--external:/fonts/*", "--external:/images/*"
]
and opts: [
  cd: "/Users/styx/ProjectsX/station_eleven/assets",
  env: %{"NODE_PATH" => "/Users/styx/ProjectsX/station_eleven/deps"},
  into: %IO.Stream{device: :standard_io, raw: false, line_or_bytes: :line},
  stderr_to_stdout: true
]

So I now run esbuild manually in verbose mode:

(cd /Users/styx/ProjectsX/station_eleven/assets && NODE_PATH=/Users/styx/ProjectsX/station_eleven/deps /Users/styx/ProjectsX/station_eleven/_build/esbuild-darwin-arm64 js/app.js --bundle --log-level=verbose --target=es2017 --outdir=../priv/static/assets)

⬥ [VERBOSE] Resolving import "./js/app.js" in directory "/Users/styx/ProjectsX/station_eleven/assets" of type "entry-point"

  Read 19 entries for directory "/"
  Read 3 entries for directory "/Users"
  The file "/Users/styx/package.json" exists
...

And that’s the root of the issue: The file "/Users/styx/package.json" exists

with content (seems I backed it up on my previous try with Phoenix)

{
  "devDependencies": {
    "esbuild": "^0.15.10"
  },
  "dependencies": {
    "esbuild-sass-plugin": "^2.3.3",
    "phoenix": "file:Projects/redacted/ex/redacted/deps/phoenix",
    "phoenix_html": "file:Projects/redacted/ex/redacted/deps/phoenix_html",
    "phoenix_live_view": "file:Projects/redacted/ex/redacted/deps/phoenix_live_view",
    "wscat": "^5.2.0"
  }
}

In addition I had symlinks in node_modules directory to that same folder as above. Which looks like an artifacts of older Phoenix version.

Is it expected behaviour to scan parent directories?

1 Like