js/render module not found on server

[woutdp]

https://elixirforum.com/t/livesvelte-e2e-reactivity-in-liveview-with-svelte/54822/4

Hi @woutdp thanks for creating this project! I’ve used it successfully in a DEV environment, but I can’t figure out how to get SSR to work when I deploy it to fly.io.

Request: GET /demo/select_tickets
** (exit) an exception was raised:
** (NodeJS.Error) Cannot find module 'js/render'
Require stack:
- /app/lib/nodejs-2.0.0/priv/server.js
Error: Cannot find module 'js/render'
Require stack:
- /app/lib/nodejs-2.0.0/priv/server.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)
at Function.resolve (node:internal/modules/cjs/helpers:114:19)
at requireModule (/app/lib/nodejs-2.0.0/priv/server.js:10:34)
at requireModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:25:15)
at callModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:31:14)
at getResponse (/app/lib/nodejs-2.0.0/priv/server.js:44:26)
at Interface.onLine (/app/lib/nodejs-2.0.0/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)
(nodejs 2.0.0) lib/nodejs/supervisor.ex:80: NodeJS.Supervisor.call!/3
(live_svelte 0.3.5) lib/ssr.ex:19: LiveSvelte.SSR.render/3
(live_svelte 0.3.5) lib/component.ex:56: LiveSvelte."render (overridable 1)"/1
(phoenix_live_view 0.18.18) lib/phoenix_live_view/tag_engine.ex:68: Phoenix.LiveView.TagEngine.component/3
(camp 0.1.1) lib/camp_web/live_demo/demo_select_tickets_live.ex:112: anonymous fn/2 in CampWeb.DemoSelectTicketsLive.render/1
(phoenix_live_view 0.18.18) lib/phoenix_live_view/diff.ex:398: Phoenix.LiveView.Diff.traverse/7
(phoenix_live_view 0.18.18) lib/phoenix_live_view/diff.ex:544: anonymous fn/4 in Phoenix.LiveView.Diff.traverse_dynamic/7

I’ve checked that I’ve installed NodeJS on both the builder and runner images, and I’ve tried both 16.x and 18.x versions.

When I remote console into the running application, I get:

NodeJS.call("console.log", ["helloworld"])
{:error,
 "Cannot find module 'console.log'\nRequire stack:\n- /app/lib/nodejs-2.0.0/priv/server.js\nError: Cannot find module 'console.log'\nRequire stack:\n- /app/lib/nodejs-2.0.0/priv/server.js\n    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)\n    at Function.resolve (node:internal/modules/cjs/helpers:114:19)\n    at requireModule (/app/lib/nodejs-2.0.0/priv/server.js:10:34)\n    at requireModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:25:15)\n    at callModuleFunction (/app/lib/nodejs-2.0.0/priv/server.js:31:14)\n    at getResponse (/app/lib/nodejs-2.0.0/priv/server.js:44:26)\n    at Interface.onLine (/app/lib/nodejs-2.0.0/priv/server.js:53:39)\n    at Interface.emit (node:events:513:28)\n    at Interface._onLine (node:readline:491:10)\n    at Interface._normalWrite (node:readline:665:12)"}
I couldn’t find any solutions on the [elixir-nodejs 1](https://github.com/revelrylabs/elixir-nodejs) docs either.

It works well when I remove the NodeJS.Supervisor from application.ex.

Any guidance would be much appreciated!

[woutdp]

Small update, there's indeed a bug for production, was able to reproduce it

[woutdp]

I think it should be fixed. A couple of changes, either follow the reinstallation steps, as they changed a bit, or do the following:

• Install version 0.4.0 of livesvelte
• Remove the /assets/js/render.js file
• Replace the NodeJS supervisor with:
  {NodeJS.Supervisor, [path: Application.app_dir(:my_app, "/priv/static/assets"), pool_size: 4]},
  and replace :my_app with your app name.
• Replace /assets/js/server.js with the new file

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

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

• Add the following to your config.exs file and again replace :my_app with your app name:

# Configures LiveSvelte
config :live_svelte, :otp_name, :my_app

[ziazek]

Hi @woutdp, I've tested it and it appears to be working. Thank you!

[woutdp]

@ziazek
Also note, with version 0.4.2 the config.exs configuration can be removed and NodeJS has been simplified to

      {NodeJS.Supervisor, [path: LiveSvelte.SSR.server_path(), pool_size: 4]},

[ziazek]

@woutdp that's great!