Trying to follow Real time phoenix book, hitting issue with channel.push

Phoenix Forum Questions / Help
1

Getting:

Uncaught TypeError: Cannot read property 'constructor' of undefined
    at Object.encode (phoenix.js?31bb:1)
    at e.value (phoenix.js?31bb:1)
    at e.value (phoenix.js?31bb:1)
    at eval (phoenix.js?31bb:1)
    at Array.forEach (<anonymous>)
    at Object.eval [as callback] (phoenix.js?31bb:1)
    at eval (phoenix.js?31bb:1)
    at Array.forEach (<anonymous>)
    at e.value (phoenix.js?31bb:1)
    at Object.eval [as callback] (phoenix.js?31bb:1)

Via the channel.push("ping") on

import { Socket } from "phoenix"

const socket = new Socket("/socket", {})

socket.connect()

export default socket

const channel = socket.channel("ping")

channel.join()
  .receive("ok", (resp) => { console.log("Joined ping", resp) })
  .receive("error", (resp) => { console.log("Unable to join ping", resp) })

console.log("send ping")
channel.push("ping")
  .receive("ok", (resp) => console.log("receive", resp.ping))

If I comment out channel.push("ping") I see:

Joined ping {}

Per the book I was expect to see.

> send ping
> Joined ping {}
> receive pong

We are logging that the ping is sent before our joined reply comes in. This highlights an important aspect of the JavaScript client: if the client hasn’t connected to the Channel yet, the message will be buffered in memory and sent as soon as the Channel is connected. It is stored in a short-lived (5-sec- ond) buffer so that it doesn’t immediately fail. This behavior is useful if our Channel ever becomes disconnected due to a client network problem, because several seconds of reconnection are available before the message is handled as an error.

This does not seem to be the case for me, thoughts? This is at the end of Channel Clients • 47

currently running:

  • webpack 4.41.5
  • Phoenix 1.5.7
  • Elixir 1.11.2
  • Erlang/OTP 23

Webpack does not give much info and I can see the join.

webpack is watching the files…

[hardsource:cb724610] Using 2 MB of disk space.
[hardsource:cb724610] Tracking node dependencies with: package-lock.json.
[hardsource:cb724610] Reading from cache cb724610...
Hash: adfd6567e415ced69797
Version: webpack 4.41.5
Time: 870ms
Built at: 12/06/2020 1:02:59 PM
                Asset       Size  Chunks             Chunk Names
       ../css/app.css   10.7 KiB     app  [emitted]  app
       ../favicon.ico   1.23 KiB          [emitted]
../images/phoenix.png   13.6 KiB          [emitted]
        ../robots.txt  202 bytes          [emitted]
               app.js   98.2 KiB     app  [emitted]  app
Entrypoint app = ../css/app.css app.js
[0] multi ./js/app.js 28 bytes {app} [built]
[../deps/phoenix/priv/static/phoenix.js] 38.9 KiB {app} [built]
    + 5 hidden modules
[debug] Live reload: priv/static/js/app.js
[debug] Live reload: priv/static/css/app.css
[debug] Live reload: priv/static/images/phoenix.png
[info] GET /
[debug] Processing with HelloSocketsWeb.PageController.index/2
  Parameters: %{}
  Pipelines: [:browser]
[info] Sent 200 in 33ms
[info] CONNECTED TO HelloSocketsWeb.UserSocket in 83µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"vsn" => "2.0.0"}
[info] JOINED ping in 21µs
  Parameters: %{}
2

maybe your issue is this errata point of the book? https://forum.devtalk.com/t/real-time-phoenix-errata-p47-missing-on-channel-creation-causes-blocking-error/4401

in other words, change channel.push("ping") into channel.push("ping", {}) and see if that works?

2 Likes
3

Dang that at first glance looked to be it, but still having the same issue.
Guess it time to go read the API

4

also check that your phoenix.js is updated to match the elixir phoenix version eg. npm install --force in assets…

3 Likes
5

That should fix this particular issue. Make sure you get all instances of it, and that the assets have rebuilt after the change.

A recent change caused this to break, and there’s not a great way to send out a fix. I will check into my options here.

2 Likes
6

Yeah looks like installing phoenix via npm vs what ever defaulted via phx.new was the solution

Oddly this was a new build on 1.5.7

1 Like
7

I think that might be a red herring. It should be equivalent to the phx.new default, since that should be the same JS. I don’t know the exact issue that happened, but it seems odd to me.

I submitted a PR to Phoenix https://github.com/phoenixframework/phoenix/pull/4093/files as the documentation specifically mentions channel.push("event") should work. I thought maybe that this was just behavior that slipped through my book review process, but it does appear that it should work since it’s documented.

If it gets fixed in the phoenix.js source, then it will just disappear from being an issue.

2 Likes
8

The PR I requested was merged :partying_face: So once the next Phoenix version is cut, it should stop being an issue.

5 Likes
9

thanks :pray:. Having fun reading the book too.

3 Likes
10

That fixed it for me. Thanks rjk !

1 Like
11

Same here, all good now. Thanks Stephen! :pray:

12

Adding , {} fixed it for me, thanks