How to enable this liveSocket.enableDebug()?

Phoenix Forum Questions / Help
1

I recently started LiveView project to work on and I was following a tutorial to work on my project. I need to enable this liveSocket.enableDebug() in my browser and when I put this in my browser

Uncaught ReferenceError: liveSocket is not defined
    at <anonymous>:1:1

Can someone explain this?

2

Probably you need to expose the liveSocket on the window object. Check you have this line in your app.js:

let liveSocket = new LiveSocket("/live", Socket, {...})
//...
liveSocket.connect()
//...
window.liveSocket = liveSocket // <--this
1 Like
3

I have this here

// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import css from "../css/app.css"

// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"

// Import local files
//
// Local files can be imported directly using relative paths, for example:
// import socket from "./socket"

import {Socket} from "phoenix"
import LiveSocket from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");

let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
liveSocket.connect()
4

Also, I added this in my app.js but still not working

window.liveSocket = liveSocket

5

AFAIK that is all that should be required. I’ve never had a problem with it.

Just in case, perhaps confirm the new js has been compiled and loaded in your browser successfully (with a log or something similar).

For further troubleshooting I would probably need to see more code.

6

here’s my package.json file. What else you need?

{
  "repository": {},
  "description": " ",
  "license": "MIT",
  "scripts": {
    "deploy": "webpack --mode production",
    "watch": "webpack --mode development --watch"
  },
  "dependencies": {
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view",
    "nprogress": "^0.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "sass-loader": "^8.0.2",
    "node-sass": "^4.13.1",
    "hard-source-webpack-plugin": "^0.13.1",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "terser-webpack-plugin": "^2.3.2",
    "webpack": "4.41.5",
    "webpack-cli": "^3.3.2"
  }
}
7

Probably at least your full app.js…

If you want, you can fork this LiveView demo app and confirm setting it on the window on the last line of app.js works.

8

Make sure you try also window.liveSocket.enableDebug().

1 Like
9

I used this but still I’m getting the same error. Is there something I have to do in a browser

10

The reason you need to expose the liveSocket on the window is because the code you see in app.js is not directly executing in the browser.
it’s being bundled by webpack, who runs every file in it’s own scope.
The code window.livesocket = liveSocket will place the liveSocket variable in the window scope.

You could either call enableDebug in the app.js file (and it will execute in the same scope), or expose it on the window, and then you can call enableDebug on the variable exposed on the window.

If you continue to get errors, is it possible to post the exact code you have in your app.js and the error you’re getting in the browser?

11

I used this demo app which is suggested here

12

That code does not expose the liveSocket on the window.
DId you make modifications to that code? If yes, please provide them.
If no, then it’s normal it won’t work and you should follow the steps outlined by others earlier in this thread.

1 Like
13

check this one

14

That looks like it should work if you just run liveSocket.enableDebug() in your browser console.

What errors are you experiencing still?

15

Same as this error I’ve mentioned here.

16

What happens if you add a console.log(liveSocket) to the js file? Also, is your socket working (aka page is updating)? You could also try putting the call to enableDebug inside the app.js file and see if that works.

17

Apparently I made a new project using this mix phx.new my_app --live and after compiling the project it’s working now. Maybe for previous project, it hasn’t compiled correctly but I’m not sure. Need to check what went wrong

Thanks

18

For adding liveview to an app that already exists, you can follow the guide here https://hexdocs.pm/phoenix_live_view/installation.html which should show you what you’re missing.

1 Like
19

I’ll take a look