Drab: remote controlled frontend framework for Phoenix

Your Libraries & OS Mentoring Libraries
, , , ,
379

Solved! I found someone had that issue too here: Drab webpack problem - Uncaught ReferenceError: require is not defined.
In Drab.Client there is the solution to this problem:

## Custom socket constructor (Webpack “require is not defined” fix)
If you are using JS bundler other than default brunch, the require method may not be availabe
as global. In this case, you might see the error:

  require is not defined

in the Drab’s javascript, in line:

  this.Socket = require("phoenix").Socket;

In this case, you must provide it. In the app.js add a global variable, which will be passed
to Drab later:

  window.__socket = require("phoenix").Socket;

Then, tell Drab to use this instead of default require("phoenix").Socket. Add to config.exs:

  config :drab, MyAppWeb.Endpoint,
    js_socket_constructor: "window.__socket"

This will change the problematic line in Drab’s javascript to:

  this.Socket = window.__socket;

Thank you! And great work with Drab!

1 Like