Cannot read properties of undefined (reading 'render')

[jakelacey2012]

I'm getting the following error when trying to SSR a component, the node version i'm running is v19.9.0, any ideas of how I can dig into this further? Thanks for creating this :)

[error] #PID<0.18745.0> running Phoenix.Endpoint.SyncCodeReloadPlug (connection #PID<0.17637.0>, stream id 35) terminated
Server: localhost:4000 (http)
Request: GET /organizations
** (exit) an exception was raised:
    ** (NodeJS.Error) Cannot read properties of undefined (reading 'render')
TypeError: Cannot read properties of undefined (reading 'render')
    at render (/Users/vento/Documents/projects/solosoftware/wut/priv/static/assets/server/server.js:450:20)
    at callModuleFunction (/Users/vento/Documents/projects/solosoftware/wut/deps/nodejs/priv/server.js:32:23)
    at getResponse (/Users/vento/Documents/projects/solosoftware/wut/deps/nodejs/priv/server.js:44:26)
    at Interface.onLine (/Users/vento/Documents/projects/solosoftware/wut/deps/nodejs/priv/server.js:53:39)
    at Interface.emit (node:events:513:28)
    at Interface._onLine (node:readline:491:10)
    at Interface._normalWrite (node:readline:665:12)
    at Socket.ondata (node:readline:272:10)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:315:12)
        (nodejs 2.0.0) lib/nodejs/supervisor.ex:80: NodeJS.Supervisor.call!/3
        (live_svelte 0.9.0) lib/ssr.ex:19: LiveSvelte.SSR.render/3
        (live_svelte 0.9.0) lib/component.ex:73: LiveSvelte."svelte (overridable 1)"/1
        (phoenix_live_view 0.19.4) lib/phoenix_live_view/tag_engine.ex:68: Phoenix.LiveView.TagEngine.component/3
        (wut 0.1.0) lib/wut_web/components/layouts/app.html.heex:30: anonymous fn/2 in WutWeb.Layouts.app/1
        (phoenix_live_view 0.19.4) lib/phoenix_live_view/diff.ex:386: Phoenix.LiveView.Diff.traverse/7
        (phoenix_live_view 0.19.4) lib/phoenix_live_view/diff.ex:136: Phoenix.LiveView.Diff.render/3
        (phoenix_live_view 0.19.4) lib/phoenix_live_view/static.ex:252: Phoenix.LiveView.Static.to_rendered_content_tag/4
        (phoenix_live_view 0.19.4) lib/phoenix_live_view/static.ex:135: Phoenix.LiveView.Static.render/3
        (phoenix_live_view 0.19.4) lib/phoenix_live_view/controller.ex:39: Phoenix.LiveView.Controller.live_render/3
        (phoenix 1.7.7) lib/phoenix/router.ex:430: Phoenix.Router.__call__/5
        (wut 0.1.0) lib/wut_web/endpoint.ex:1: WutWeb.Endpoint.plug_builder_call/2
        (wut 0.1.0) deps/plug/lib/plug/debugger.ex:136: WutWeb.Endpoint."call (overridable 3)"/2
        (wut 0.1.0) lib/wut_web/endpoint.ex:1: WutWeb.Endpoint.call/2
        (phoenix 1.7.7) lib/phoenix/endpoint/sync_code_reload_plug.ex:22: Phoenix.Endpoint.SyncCodeReloadPlug.do_call/4
        (plug_cowboy 2.6.1) lib/plug/cowboy/handler.ex:11: Plug.Cowboy.Handler.init/2
        (cowboy 2.10.0) /Users/vento/Documents/projects/solosoftware/wut/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
        (cowboy 2.10.0) /Users/vento/Documents/projects/solosoftware/wut/deps/cowboy/src/cowboy_stream_h.erl:306: :cowboy_stream_h.execute/3
        (cowboy 2.10.0) /Users/vento/Documents/projects/solosoftware/wut/deps/cowboy/src/cowboy_stream_h.erl:295: :cowboy_stream_h.request_process/3
        (stdlib 5.0.2) proc_lib.erl:241: :proc_lib.init_p_do_apply/3

[woutdp]

Did you import live_svelte in your package.json and run npm instal?

You should have the following dependency:

"dependencies": {
    "live_svelte": "file:../deps/live_svelte"
}

[jakelacey2012]

@woutdp thanks for the prompt reply, this is my package.json

{
  "devDependencies": {
    "esbuild": "^0.16.17",
    "esbuild-plugin-import-glob": "^0.1.1",
    "esbuild-svelte": "^0.7.4",
    "svelte": "^4.1.1",
    "svelte-preprocess": "^5.0.4"
  },
  "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"
  }
}

and I've installed my node dependencies, this is the contents of the live_svelte directory.

➜  wut git:(main) ✗ ls -l assets/node_modules/live_svelte/
total 80
-rw-r--r--@  1 vento  staff   1597 Jul 20 12:58 CHANGELOG.md
-rw-r--r--@  1 vento  staff   1085 Jul 20 12:58 LICENSE.md
-rw-r--r--@  1 vento  staff  19433 Jul 20 12:58 README.md
drwxr-xr-x@  4 vento  staff    128 Jul 20 12:58 assets
-rw-r--r--@  1 vento  staff   2720 Jul 20 12:58 hex_metadata.config
drwxr-xr-x@ 10 vento  staff    320 Jul 20 12:58 lib
-rw-r--r--@  1 vento  staff   1797 Jul 20 12:58 mix.exs
-rw-r--r--@  1 vento  staff    943 Jul 20 12:58 package.json
drwxr-xr-x@  3 vento  staff     96 Jul 20 12:58 priv

[woutdp]

That looks correct, and svelte 4 should be working so that's probably not the issue.

What does server.js look like?

It should look something like this:

import * as Components from "../svelte/**/*"
import {exportSvelteComponents, render} from "live_svelte"

module.exports = exportSvelteComponents(Components)
module.exports.ssrRenderComponent = render

The error seems to be that it can't find render in the server.js file on line 2. But that should be available as you configured the package.json correctly, so maybe it's not there in the node_modules. Another long shot it trying to remove node_modules and reinstalling by running npm install inside the assets folder.

[jakelacey2012]

Yeah the server.js has this which looks the same as what you have there

import * as Components from "../svelte/**/*"
import {exportSvelteComponents, render} from "live_svelte"

module.exports = exportSvelteComponents(Components)
module.exports.ssrRenderComponent = render

[jakelacey2012]

Maybe it might help as well if I share what the component looks like and how I'm calling it.

<.svelte name="SimpleCounter" />

<script>
    export let number
    let other = 1
</script>

<div class="flex flex-col justify-center items-center gap-4 p-4">
    <div class="flex flex-row items-center justify-center gap-10">
        <div class="flex flex-col justify-center items-center">
            Server
            <span class="text-xl">{number}</span>
            <button class="plus" phx-click="increment">+1</button>
        </div>

        <div class="flex flex-col justify-center items-center">
            Client!!
            <span class="text-xl">{other}</span>
            <button class="plus" on:click={() => (other += 1)}>+1</button>
        </div>
    </div>
</div>

[jakelacey2012]

Yeah even after re-installing the node_modules it doens't work and I get the same error :(

[woutdp]

The code looks correct to me.

Another things you can try if you don't mind to keep trying is to install the example_project: https://github.com/woutdp/live_svelte/tree/master/example_project

If that works then check how your project is different from it. It should be pretty similar.

[vonagam]

Just got the same error. On this line of live_svelte/render.js there is an expectation of default export being present with render property on it. But checking it in runtime and I see that there is no default export but render is exported directly. So if .default is erased on that line then everything works.

I see that example project uses svelte v3 but last month v4 was released and it seems like one of the things was depreciation of CJS things. I got version 4 because mix generation task for live_svelte uses npm install svelte without version specifier. I assume that might be the reason why output exports is different.

[woutdp]

@vonagam you are correct, thank you for debugging it, you saved me a lot of time. I was mistaking thinking Svelte 4 was supported.

I've pushed a new version with your change in it: 0.10.0

Can you test again to see if it works? You might need to npm install again after the installation.

[vonagam]

Works for me.

[gevera]

Good catch @vonagam . 0.10.0 fixed that render issue

[woutdp]

Nice, closing for now, feel free to reopen if it's still occuring