Stuck while following the Chirp tutorial by Chris McCord

Phoenix Forum Questions / Help
,
1

Hi, I am trying to follow the tutorial by Chris McCord - creating a Twitter clone called Chirp.

I managed get to:

mix phx.gen.live Timeline Post posts username body likes_count:integer reposts_count:integer

and I put the suggested routes in the router.

but I am stuck at the next step where Chris generates the db schema with

mix ecto.migrate

The error I am getting is this one:

Compiling 12 files (.ex)

== Compilation error in file lib/chirp_web/live/live_helpers.ex ==
** (CompileError) lib/chirp_web/live/live_helpers.ex:55: Phoenix.LiveView.JS.__struct__/1 is undefined, cannot expand struct Phoenix.LiveView.JS. Make sure the struct name is correct. If the struct name exists and is correct but it still cannot be found, you likely have cyclic module usage in your code
    lib/chirp_web/live/live_helpers.ex:55: (module)

This step can be seen here: Build a real-time Twitter clone in 15 minutes with LiveView and Phoenix 1.5 - YouTube

Any idea why is it failing?

2

You have hit this issue: Warn on phx.gen.live if LiveView.JS is missing? · Issue #4642 · phoenixframework/phoenix · GitHub

Basically the issue is that the current phx.new generates a project with phoenix_live_view version 0.16, but the phoenix package’s phx.* generators work on the assumption that you have phoenix_live_view 0.17. So by upgrading phoenix_live_view to 0.17 you will get rid of this compilation error.

2 Likes
3

It seems to be working but in VS Code my mix.exs file is colored red and the problems tab shows this message:

an exception was raised:

    ** (Mix.Error) Can't continue due to errors on dependencies
        (mix 1.13.0) lib/mix.ex:515: Mix.raise/2
        (mix 1.13.0) lib/mix/tasks/deps.loadpaths.ex:34: Mix.Tasks.Deps.Loadpaths.run/1
        (mix 1.13.0) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
        (mix 1.13.0) lib/mix/tasks/loadpaths.ex:40: Mix.Tasks.Loadpaths.run/1
        (mix 1.13.0) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
        (mix 1.13.0) lib/mix/tasks/compile.ex:123: Mix.Tasks.Compile.run/1
        (mix 1.13.0) lib/mix/task.ex:397: anonymous fn/3 in Mix.Task.run_task/3
        (language_server 0.8.2) lib/language_server/build.ex:200: ElixirLS.LanguageServer.Build.compile/0

All I did was changed:


      {:phoenix_live_view, "~> 0.16.0"},
      {:phoenix_live_dashboard, "~> 0.5"},

to:

      {:phoenix_live_view, "~> 0.17.0"},
      {:phoenix_live_dashboard, "~> 0.6"},

then mix deps.get

I have tried to run mix phx.server and it runs but the problem is still there even if I restart VS Code.

Do you know how to get rid of this problem?

4

OK, the solution to this problem with mix.exs is to delete the whole .elixir_ls folder inside your project directory and to relaunch VS Code. It seem that this does get rid of those red squiggly lines. And, at least for me, the Problems tab in VS Code is not empty.

2 Likes