LiveView 0.16 Generator Makes Phoenix.LiveView.JS Boilerplate

Phoenix Forum Questions / Help
1

When I generate liveview boilerplate with this command:

mix phx.gen.live Catalog Product products description:string name:string sku:integer unit_price:float image_upload:string

and run mix ecto.migrate

I get the error

== Compilation error in file lib/hello_world_web/live/live_helpers.ex ==
** (CompileError) lib/hello_world_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/hello_world_web/live/live_helpers.ex:55: (module)

I can’t use LiveView 0.17 yet because Surface doesn’t support it yet.

mix.exs:

{:phoenix, "~> 1.6.2"},
{:phoenix_live_view, "~> 0.16.0"},

Is there a workaround to this? How do I generate the 0.16 boilerplate without Phoenix.LiveView.JS ?

2

The generators are in the phoenix package so downgrading that to a suitable version would work (can’t say which version offhand).

3

Am I doing this right? I did
mix archive.install hex phx_new 1.6.0
and
mix archive.install hex phx_new 1.5.13

running the same mix phx.gen.live command and they both generated LiveView.JS.__struct__

log:

➜  hello_world git:(liveview-upload) ✗ mix archive.install hex phx_new 1.6.0 
Resolving Hex dependencies...
Dependency resolution completed:
New:
  phx_new 1.6.0
* Getting phx_new (Hex package)
All dependencies are up to date
Compiling 11 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.6.0.ez" with MIX_ENV=prod
Found existing entry: /Users/michael/.asdf/installs/elixir/1.12.2/.mix/archives/phx_new-1.6.2
Are you sure you want to replace it with "phx_new-1.6.0.ez"? [Yn] 
* creating /Users/michael/.asdf/installs/elixir/1.12.2/.mix/archives/phx_new-1.6.0
➜  hello_world git:(liveview-upload) ✗ l
total 4976
drwxr-xr-x   18 michael  staff   576B 15 Dec 08:45 .
drwxr-xr-x  123 michael  staff   3.8K 13 Dec 15:44 ..
-rw-r--r--@   1 michael  staff   6.0K 14 Dec 17:29 .DS_Store
drwxr-xr-x    6 michael  staff   192B 15 Dec 08:45 .elixir_ls
-rw-r--r--    1 michael  staff   159B 15 Dec 08:45 .formatter.exs
drwxr-xr-x   14 michael  staff   448B 15 Dec 10:48 .git
-rw-r--r--    1 michael  staff   985B 15 Dec 08:45 .gitignore
-rw-r--r--    1 michael  staff   701B 13 Dec 15:44 README.md
drwxr-xr-x    5 michael  staff   160B 13 Dec 16:39 _build
drwxr-xr-x   11 michael  staff   352B 15 Dec 08:45 assets
drwxr-xr-x    7 michael  staff   224B 15 Dec 08:45 config
drwxr-xr-x   47 michael  staff   1.5K 14 Dec 18:59 deps
-rw-r-----    1 michael  staff   2.4M 13 Dec 16:45 erl_crash.dump
drwxr-xr-x    6 michael  staff   192B 15 Dec 08:45 lib
-rw-r--r--    1 michael  staff   2.1K 15 Dec 08:45 mix.exs
-rw-r--r--    1 michael  staff    11K 15 Dec 08:45 mix.lock
drwxr-xr-x    7 michael  staff   224B 14 Dec 17:29 priv
drwxr-xr-x    6 michael  staff   192B 15 Dec 08:45 test
➜  hello_world git:(liveview-upload) ✗ gst
On branch liveview-upload
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   lib/hello_world_web.ex
	modified:   lib/hello_world_web/router.ex

Untracked files:
  (use "git add <file>..." to include in what will be committed)
	assets/js/_hooks/
	lib/hello_world/catalog.ex
	lib/hello_world/catalog/
	lib/hello_world_web/live/
	priv/repo/migrations/20211215134541_create_products.exs
	test/hello_world/
	test/hello_world_web/live/
	test/support/fixtures/

no changes added to commit (use "git add" and/or "git commit -a")
➜  hello_world git:(liveview-upload) ✗ mix phx.gen.live Catalog Product products description:string name:string sku:integer unit_price:float image_upload:string
* creating lib/hello_world_web/live/product_live/show.ex
* creating lib/hello_world_web/live/product_live/index.ex
* creating lib/hello_world_web/live/product_live/form_component.ex
* creating lib/hello_world_web/live/product_live/form_component.html.heex
* creating lib/hello_world_web/live/product_live/index.html.heex
* creating lib/hello_world_web/live/product_live/show.html.heex
* creating test/hello_world_web/live/product_live_test.exs
* creating lib/hello_world_web/live/live_helpers.ex
* creating lib/hello_world/catalog/product.ex
* creating priv/repo/migrations/20211215160851_create_products.exs
* creating lib/hello_world/catalog.ex
* injecting lib/hello_world/catalog.ex
* creating test/hello_world/catalog_test.exs
* injecting test/hello_world/catalog_test.exs
* creating test/support/fixtures/catalog_fixtures.ex
* injecting test/support/fixtures/catalog_fixtures.ex
* injecting lib/hello_world_web.ex

Add the live routes to your browser scope in lib/hello_world_web/router.ex:

    live "/products", ProductLive.Index, :index
    live "/products/new", ProductLive.Index, :new
    live "/products/:id/edit", ProductLive.Index, :edit

    live "/products/:id", ProductLive.Show, :show
    live "/products/:id/show/edit", ProductLive.Show, :edit


Remember to update your repository by running migrations:

    $ mix ecto.migrate

➜  hello_world git:(liveview-upload) ✗ mix ecto.migrate
Compiling 12 files (.ex)

== Compilation error in file lib/hello_world_web/live/live_helpers.ex ==
** (CompileError) lib/hello_world_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/hello_world_web/live/live_helpers.ex:55: (module)
➜  hello_world git:(liveview-upload) ✗ mix archive.install hex phx_new 1.5.13                                                                                   
Resolving Hex dependencies...
Dependency resolution completed:
New:
  phx_new 1.5.13
* Getting phx_new (Hex package)
All dependencies are up to date
Compiling 10 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.5.13.ez" with MIX_ENV=prod
Found existing entry: /Users/michael/.asdf/installs/elixir/1.12.2/.mix/archives/phx_new-1.6.0
Are you sure you want to replace it with "phx_new-1.5.13.ez"? [Yn] 
* creating /Users/michael/.asdf/installs/elixir/1.12.2/.mix/archives/phx_new-1.5.13
➜  hello_world git:(liveview-upload) mix phx.gen.live Catalog Product products description:string name:string sku:integer unit_price:float image_upload:string
* creating lib/hello_world_web/live/product_live/show.ex
* creating lib/hello_world_web/live/product_live/index.ex
* creating lib/hello_world_web/live/product_live/form_component.ex
* creating lib/hello_world_web/live/product_live/form_component.html.heex
* creating lib/hello_world_web/live/product_live/index.html.heex
* creating lib/hello_world_web/live/product_live/show.html.heex
* creating test/hello_world_web/live/product_live_test.exs
* creating lib/hello_world_web/live/live_helpers.ex
* creating lib/hello_world/catalog/product.ex
* creating priv/repo/migrations/20211215161006_create_products.exs
* creating lib/hello_world/catalog.ex
* injecting lib/hello_world/catalog.ex
* creating test/hello_world/catalog_test.exs
* injecting test/hello_world/catalog_test.exs
* creating test/support/fixtures/catalog_fixtures.ex
* injecting test/support/fixtures/catalog_fixtures.ex
* injecting lib/hello_world_web.ex

Add the live routes to your browser scope in lib/hello_world_web/router.ex:

    live "/products", ProductLive.Index, :index
    live "/products/new", ProductLive.Index, :new
    live "/products/:id/edit", ProductLive.Index, :edit

    live "/products/:id", ProductLive.Show, :show
    live "/products/:id/show/edit", ProductLive.Show, :edit


Remember to update your repository by running migrations:

    $ mix ecto.migrate

➜  hello_world git:(liveview-upload) ✗ mix ecto.migrate
Compiling 12 files (.ex)

== Compilation error in file lib/hello_world_web/live/live_helpers.ex ==
** (CompileError) lib/hello_world_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/hello_world_web/live/live_helpers.ex:55: (module)
4

phx_new only includes the new project generator (phx.new). The others come from your project’s phoenix package.

5

Aha yes, I locked phoenix to 1.6.1 and it didn’t bring-in LiveView.JS, thanks.

{:phoenix, “<= 1.6.1”},