Drab webpack problem - Uncaught ReferenceError: require is not defined

Hi @dokuzbir,
yes, Drab does it:

window.Drab = {
  create: function (drab_return_token, drab_session_token, broadcast_topic) {
    this.Socket = require("phoenix").Socket;

And webpack does not provide global require. We had some discussions about it in github before, but I still can’t find the more universal way to initialize Socket.

This is a good point to ask the community, how to improve this?

Now Drab injects its javascript directly into the page. This is why:

1. Drab’s JS are dynamic (EEx), they depends on the configuration: for example they injects only the parts of used Drab Modules, so if you don’t want to use Drab.Live, it does not inject that part of javascript. Also, there are configuration options which changes the generation of the JS part.
2. The JS generation function (Drab.Client.run/2) passes some information from conn to the client, for example - the controller name, in the token, which is checked on each execution of the event handler.
3. Personally, I find npm and friends a nightmare.

I could extract all Drab JS and put it as an npm package, changing Drab.Client.run/2 to pass all the configuration options and modules to use. I could even split it into individual packages, so you could decide if you want Drab.Live or not. But, would this solve the issue with require and webpack?

Also, I could make require("phoenix").Socket as a configurable option, so you could do something like:

config :drab, socket_constructor: "window.socket"

What do you guys think?

I don’t think the link is relevant, as the guy there want to use the plain net socket in the browser, we are here speaking about websockets…

Sorry maybe strange question but why that didnt work ?
I added that to app.js window.socket = require("phoenix").Socket
and in drap.js i changed this.Socket = window.socket
I got that error this.Socket is not a constructor.

No idea. This is much above my understanding of javascript…

How can object.property = something complain that object.property is not a constructor? Obviously, it isn’t.

Or maybe it is one of those special, misleading errors which source is not exactly in this line?

This is code is giving error

var params = Object.assign({ __drab_return: this.drab_return_token }, additional_token);
      params = Object.assign(params, {__client_lib_version: Drab.client_lib_version});
      this.socket = new this.Socket("/socket", { //error at this line
        params: params
      });

I see. Now it is clearer.
Looks like your window.socket is not a correct object. You may try to debug what is there before you do this.Socket = window.socket in drab.js.

I found problem. Problem was i was using defer attribute on app.js i deleted it. And now drab is working thanks.

Cool.

So, the configuration:

config :drab, socket_constructor: "window.socket"

would fix your issue? I understand you now just hacked Drab changing its JS file, yes?

Yes it fixes issue. I just added two line to my app.
app.js window.socket = require("phoenix").Socket,
drap.js this.Socket = window.socket