Getting 'Encountered error: "ReferenceError: self is not defined"' about isomorphic-relay HOT 9 CLOSED

Hi @shaimo. Probably you need to change the server side webpack config: denvned/isomorphic-relay-router#5 (comment)

from isomorphic-relay.

Thanks @denvned. I will try to change it but can you explain why it won't work as is?

from isomorphic-relay.

I tried adding the externals and target field, and also changed the libraryTarget to commonjs2 and now I'm getting a different error:

Encountered error: "TypeError: require is not a function"

If I try adding just the externals field I get:

Encountered error: "ReferenceError: isomorphic is not defined"

from isomorphic-relay.

Do you get these errors in the browser, or on Node?

from isomorphic-relay.

On the server side. The only caveat is that my backend is rails so for server rendering it is using ExecJS. I set it to use Node (rather than the default therubyracer) but it doesn't seem to matter.
Maybe something that can explain the problem - I'm looking at the bundled code generated by webpack and I'm not entirely understanding the order it puts things in. E.g. currently my original few lines of code are:

require('fixFetch'); // copied from isomorphic-relay to try and put it first
var stringify = require('json-stringify-safe');
import IsomorphicFetch from 'isomorphic-fetch';
import IsomorphicRelay from 'isomorphic-relay';
import Relay from 'react-relay';

var React = require('react');
import ReactOnRails from 'react-on-rails';

and what I get is:

/***/ function(module, exports, __webpack_require__) {

        'use strict';

        var _isomorphicFetch = __webpack_require__(1);

        var _isomorphicFetch2 = _interopRequireDefault(_isomorphicFetch);

        var _isomorphicRelay = __webpack_require__(3);

        var _isomorphicRelay2 = _interopRequireDefault(_isomorphicRelay);

        var _reactRelay = __webpack_require__(72);

        var _reactRelay2 = _interopRequireDefault(_reactRelay);

        var _reactOnRails = __webpack_require__(427);

        var _reactOnRails2 = _interopRequireDefault(_reactOnRails);

        function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

        __webpack_require__(447); // copied from isomorphic-relay to try and put it first
        var stringify = __webpack_require__(448);

        var React = __webpack_require__(132);

It seems that for some reason webpack is refusing to put fixFetch (I guess module 447 above) first. Any idea why and what I can do to force it to require it first?

from isomorphic-relay.

Regarding the order, I guess it's putting the "import"s before the regular "require"s. If I change

require('fixFetch');

to

import 'fixFetch';

it then puts it first. But it still doesn't work and I'm getting the same error:

Encountered error: "ReferenceError: self is not defined"

from isomorphic-relay.

Maybe I understand why it's not working. Your hack changes prototype.require to replace the loading of fetch with the isomorphic fetch. But webpack changes all those require calls to webpack_require with module numbers (no more module names).
Maybe this can somehow be hacked instead at the webpack level when preparing the bundle?

from isomorphic-relay.

Maybe this can somehow be hacked instead at the webpack level when preparing the bundle?

Something like this might work:

externals: {
  "fbjs/lib/fetch": "global.fetch",
  "fbjs/lib/fetchWithRetries": "global.fetch"
}

from isomorphic-relay.

FYI, the hack is not needed since version 0.5 of isomorphic-relay.

from isomorphic-relay.