Problem: unknown hook found for "SvelteHook"

[cibernox]

I think I followed the install instructions to the dot and yet, after generating all assets I still get Problem: unknown hook found for "SvelteHook" in the browser.

What may I be missing to get this error?

[cibernox]

Some findings. The reason why this seems to not work is that this app's main JS file is not assets/js/app.js but assets/js/name_of_the_app.js.

However after changing the entrypoint in build.js it's still not working, trying to figure out why.

[woutdp]

I was just typing out this response but it might still be relevant.

Make sure you have the following lines somewhere in your app.js file, (which is named differently for you):

//...
import {getHooks} from "live_svelte"
import * as Components from "../svelte/**/*.svelte"

//...
let liveSocket = new LiveSocket("/live", Socket, {hooks: getHooks(Components), params: {_csrf_token: csrfToken}})
//...

and your package.json should have the following dependencies:

{
    "devDependencies": {
        "esbuild": "^0.16.17",
        "esbuild-plugin-import-glob": "^0.1.1",
        "esbuild-svelte": "^0.7.4",
        "svelte": "^4.1.2"
    },
    "dependencies": {
        "live_svelte": "file:../deps/live_svelte",
        "phoenix": "file:../deps/phoenix",
        "phoenix_html": "file:../deps/phoenix_html",
        "phoenix_live_view": "file:../deps/phoenix_live_view",
    }
}

Another tip is to reinstall the packages with npm install from the assets folder (deleting node_modules might help too before reinstalling).

[cibernox]

Solved it.

There were two problems. The main is that the output directory of the build JS files didn't match ours, and the second that this app is quite untraditional and import LiveView had to be added on a different module.