unknown hook found for "SvelteHook" (with Phoenix 1.8.0-rc1)

[andruby]

I'm trying to use LiveSvelte with Phoenix 1.8.0-rc1. I'm getting a unknown hook found for "SvelteHook" error in the JS console (as well as a syntax error when using <style>)

I'm running MacOS 15.3.2 with Node v23.6.0. On Phoenix 1.7.21 I didn't have these errors.

Looking at the Phoenix changelog I don't see what would have broken things between 1.7.21 and the 1.8.0 RC's for LiveSvelte.

Steps to reproduce

# new phoenix project
mix archive.install hex phx_new 1.8.0-rc.1 --force
mix phx.new sveleith --database=sqlite3
cd sveleith
mix ecto.create

Followed the LiveSvelte installation instructions (mix live_svelte.setup etc) and added the Simple numbers svelte and view from the examples folder.

I pushed the code to https://github.com/andruby/live_svelte_1.8.0

[woutdp]

Hmm interesting, maybe the way 1.8 tries to find hooks is different. I'll probably look at this once 1.8 is stable until looking into this as things might still change.

[andruby]

I hunted it down to changing

<script defer phx-track-static type="text/javascript" src={~p"/assets/js/app.js"}>

to

 <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>

That made it all work. Seems like Phoenix 1.8 changed the css path from /assets/app.css to /assets/css/app.css and the js path from assets/app.js to /assets/js/app.js.

[johnboode]

I've just tried @andruby's solution on 1.8.0-rc3 and I can confirm that changing the app.js route at line 11 in root.html.ex solves the problem, but not changing the css route at line 10. This works on my freshly installed rc3 phx-new app + live_svelte as per instructions.

<link phx-track-static rel="stylesheet" href={~p"/assets/css/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>

Before making the change I had another problem as well. My live view seemed to render correctly with the svelte component, but it disappeared completely after a few seconds while displaying the SvelteHook error in the console. This is with SSR enabled. Disabling SSR solved the disappearing component, but not the SvelteHook error.

[Japhethca]

I also fixed it by updating build.js

let optsClient = {
...,
outdir: "../priv/static/assets/js",
...
}