Falcor doesn't make requests when bundled with webpack

[memoryhole]

I'm looking at migrating a project from browserify to webpack. When I do so Falcor stops making network requests.

@sdesai mentioned he's seen a similar problem and suspected it was due to a duplicate Rx dependency in the bundle. I've tried adding the dedupe plugin and using resolve.alias directives in webpack, but the issue persists.

[sdesai]

Model also seems to be included twice (and I imagine other modules also, based on how they are required). I also played with npm dedupe, resolve.alias with no luck.

Webpack doesn't seem to do as thorough a job of removing duplicate modules [ with diff. absolute require paths ] as Browserify, hence the issue.

I imagine it's some module state [ probably with Rx, and the way it has modules which modify the 'global' Rx export prototype ], which gets clobbered when the base Rx module is required a second time. Where I left it, it wasn't able to find the 'reduce' operator while trying to dispatch the request [ and the error was being swallowed ]

[sdesai]

So, with:

'webpack --output-library falcor --optimize-dedupe browser.js falcor-webpack.js'

I can get rid of the duplicate Model. Still have a duplicate Rx module, which results in the MergeObservable coming out of the mergeAll() here:

falcor/lib/request/RequestQueue.js

Line 33 in 33fa8f3

.mergeAll()

Not having a reduce operator, probably because it's added to the 'global' Rx by some other 'sub module.

[sdesai]

I guess it's the rx.aggregates module which comes in and adds 'reduce', and so it's missing when the second copy of the rx core module is executed.

[sdesai]

Yeah, that is it. If I manually alias them in the built file (replace webpack_require_(N) with whichever version of the Rx module Rx.aggregate augments), it works fine. Will see if there's a way to do this externally through official webpack config channels [ it seemed like resolve.alias was that ], or change the structure of the require pulling in rx.aggregate, and see if that helps.

[sdesai]

In, falcor's entry point: falcor/lib/index.js

We have:

require('rx/dist/rx');
require('rx/dist/rx.aggregates');
require('rx/dist/rx.binding');

And in other places, we have:

require('rx/dist/rx');

The references to rx/dist/rx are all normalized to the same rx (core) Webpack module, which is fine.

However internally rx/dist/rx.aggregates and rx/dist/rx/binding are already bundled, with their own 'UMD' type handling, which require 'rx' in various forms [ amd, cjs, and global ]

Webpack takes the AMD path, and is using Rx's package.json browser entry to translate these rx dependencies into rx/dist/rx.all.js (as opposed to core), which is the 2nd or duplicate Rx module.

One is rx/dist/rx.js and the other is rx/dist/rx.all.js, and rx.all is the one which has the aggregate and binding methods (reduce etc). attached to the prototype, instead of the rx core module which everyone is using.

Since Webpack is taking the AMD path for rx/dist/rx.aggregates.js I don't think it's applying the resolve.alias hooks.

[sdesai]

@memoryhole : This fixes it for me:

module.exports = {
  resolve: {
    alias: {
      'rx$': require.resolve('rx/dist/rx')
    }
  }
};

Can you give it a try?

The root cause is what I mention above.

[sdesai]

Since this is an RxJS bug, rather than a Falcor one, planning to resolve this by:

1. Adding the webpack.conf.js to the Falcor repo root (for anyone building Falcor using WebPack).
2. Adding something to the README.md (or wherever we have build instructions), for people using Webpack to build projects which require('falcor').
3. Submitting a bug (with potential fixes) for RxJS.

The cleaner permanent solution would be to have RxJS (or whichever Rx is bundled with Falcor) distributed as CJS modules, which we could require individually.

[sdesai]

RxJS Bug, with repro: Reactive-Extensions/RxJS#832

[ThePrimeagen]

This should be closed due to PR merged and behavior "fixed".