Functional Web Development with Elixir, OTP, and Phoenix: Javascript can't be loaded into dev console (p160)

Community PragProg Customers
,
1

The client javascript commands start on page 160 where the phoenix.js file needs to be required into the console environment, however running the written command var phoenix = require("phoenix") results in

Uncaught ReferenceError: require is not defined
    <anonymous> debugger eval code:1
2

It seems to kinda work if import {Socket} from "phoenix" is uncommented from app.js in the phoenix project. I don’t know enough about webpack yet to say why, but this defines the Phoenix module within the context of the browser console (not just Socket).

3

I recently completed the book on Phoenix 1.6, so it may not be valid on future versions, but I have a workaround (just for the client side JavaScript). In assets/js/web.app, add the following code:

window.Socket = Socket

Then when you open the development console, instead of writing

var socket = new phoenix.Socket()

you write:

var socket = new Socket()