Bacon and webpack

[Issam Zoli]

Hi,

Use this to fix Bacon usage with webpack :

if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
    define([], function() {
      return Bacon;
    });
    this.Bacon = Bacon;
}
if ((typeof module !== "undefined" && module !== null) && (module.exports != null)) {
    module.exports = Bacon;
    Bacon.Bacon = Bacon;
}
this.Bacon = Bacon;

[Juha Paananen]

Would you care to submit a pull request for the fix?

-juha-

On 2.8.2015, at 13.41, Zoli Issam [e-mail] wrote:

Hi,

Use this to fix Bacon usage with webpack :

if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
define([], function() {
return Bacon;
});
this.Bacon = Bacon;
}
if ((typeof module !== "undefined" && module !== null) && (module.exports != null)) {
module.exports = Bacon;
Bacon.Bacon = Bacon;
}
this.Bacon = Bacon;
—
Reply to this email directly or view it on GitHub.

[Jack Jennings]

Doesn't this now leak Bacon into the global namespace by default?

[Roma P.]

Just tried to use Bacon with webpak. Seems like it having trouble with this.Bacon = Bacon. Webpack is trying to play nice with both amd and common js, so detection of amd passes. Also webpack adds "use strict" (or perhaps Babel does this in my setup, not sure), so this equals null in it.

In any case, I think the right fix is to first check for common js (module.exports), and then (via else if) for amd etc. (i.e. simply swap those two blocks)

[Issam Zoli]

@rpominov Checking for amd and commonjs shouldn't be separated they can coexist like in webpack.
@jackjennings Yes it is, I'm still thinking of some clean way to do it, I didn't wan't to return and I didn't wan't to use 2 flags :/

Many Js environments these days, it's hard to export to all of them, I think Bacon should use some boilerplate export code like the one used in lodash.

[Roma P.]

Checking for amd and commonjs shouldn't be separated they can coexist like in webpack.

I don't quite understand the case where you might want to use commonjs and amd at the same time. Webpack allows you to import amd modules, but in order to import them you still use commonjs' require(). And I think webpack might get confused if a module will try to export itself as both amd and commonjs at the same time.

I think Bacon should use some boilerplate export code

https://github.com/umdjs/umd looks like it.

Also you've never mentioned the problem you have with Bacon in Webpack 😄 The one I found should be fixed by either swapping amd and commonjs blocks, or by removing this.Bacon = Bacon from amd block.

[Issam Zoli]

I'm not sure how webpack handles that conflict, I actually commented everything and kept only the commonjs 😃
I was wondering what the line this.Bacon = Bacon; is doing in amd, probably nothing so better get rid of it if it's the cause of the problem.

[Jack Jennings]

The this.Bacon exports Bacon to the window if Bacon isn't being loaded as a module (e.g. being required as a separate file using a script tag) so I don't think it should be removed in this case.

[Daniel K]

Using webpack and Bacon always worked well for me.

[Michael Jones]

Unfortunately I'm not experienced in the ways of JS modules and how best to approach this but I'm having the same trouble with the latest Bacon (0.7.71) and latest webpack (1.11.0). It would be very welcome to see it resolved. Are there other libraries that might be used as examples for handling this?

[Michael Jones]

As a random reference, ramda.js does it like this:

  if (typeof exports === 'object') {
    module.exports = R;
  } else if (typeof define === 'function' && define.amd) {
    define(function() { return R; });
  } else {
    this.R = R;
  }

And it works with Webpack. I don't have experience with other systems though.

[Roma P.]

Actually the problem might be with babel, not with webpack itself. Babel adds "use strict" which causes problems. At leas in my case. And if I disable babel for /node_modules/ everything works fine.

Here is an example config from https://github.com/babel/babel-loader:

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel'
    }
  ]
}

[Michael Jones]

Thanks for pointing that out. Much appreciated! It works for me if I do that.

I'd argue that perhaps if failing with use strict is a bad thing and should be addressed. The amd handling looks a little dodgy to a complete beginner as I assume that the define function is meant to handle everything as in the ramda case so the additional this.Bacon = Bacon is perhaps unnecessary?

[Juha Paananen]

I ran into this issue too. Will fix pretty soon :)

[Juha Paananen]

What I did was to check if this is undefined and in that case not set this.Bacon=Bacon. I'm being ultra defensive here to avoid breaking anyone's existing configuration. Hope this helps!

[Juha Paananen]

So I workarounded this in Bacon even though you can do that like @rpominov suggested. This way there'll be a smaller number of wtfs. Fix included in 0.7.73.