woutdp / live_svelte

Svelte inside Phoenix LiveView with seamless end-to-end reactivity
https://hexdocs.pm/live_svelte
MIT License
1.01k stars 38 forks source link

js/render module not found on server #21

Closed woutdp closed 1 year ago

woutdp commented 1 year ago

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 commented 1 year ago

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

woutdp commented 1 year ago

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

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:
```elixir
# Configures LiveSvelte
config :live_svelte, :otp_name, :my_app
ziazek commented 1 year ago

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

woutdp commented 1 year ago

@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 commented 1 year ago

@woutdp that's great!