Horizon: React native Horizon client issue - fetch import

[arthurvi]

Client version: 1.0.2

When using the horizon client in React Native by calling import Horizon from '@horizon/client'; you get the following error: Unable to resolve module imports?this=>global!exports?global.fetch!isomorphic-fetch from ....

The problem is this line: https://github.com/rethinkdb/horizon/blob/next/client/src/util/fetch.js#L6. I think it is a way to shim modules with webpack. I'm not entirely sure how to fix it? React Native had its own implementation of global.fetch by default, so we should use that instead of a module. Any ideas?

[jonatansberg]

Just removing or commenting out that line and the line above inside node_modules/@horzon/client/lib/util/fetch.js will allow the packager to continue. Things still break when engine.io-client is initialized though.

To fix that you need to replace engine.io-client with the react-native-engine.io-client fork util this React Native packager issue is fixed.

Edit: Still doesn't work though, but now there's no obvious errors. It just fails silently. :/

[flipace]

Oh my. Why does this still fail for some? The error above means that the imports-loader cant be found. Could you test if it works if you replace "imports" and "exports" with "imports-loader" and "exports-loader"? Are you bundling with webpack?

[arthurvi]

@mrlundis Jup, too bad.
@flipace Replacing imports and exports does not work. I'm using the default React Native packager.

[jonatansberg]

@flipace I'm also trying to run horizon inside a React Native app and I get the same error when replacing imports and exports as you suggested.

[flipace]

Okay thanks for the info. I thought this issie was resolved, but it seems that it's still open for react native/non-webpack packagers. Will try to find a different workaround. Thanks for trying!

[arthurvi]

@flipace In Relay they had an issue with RN and fetch as well. https://github.com/facebook/relay/issues/26
But I did not find the solution they went for in this thread. Maybe check whether global.fetch is already defined?

global.self = global;
if (!global.fetch) {
   require('imports-loader?this=>global!exports-loader?global.fetch!isomorphic-fetch');
}

[rt2zz]

@arthurvi afaik you cannot do conditional requires in RN.

What exactly does require('imports-loader?this=>global!exports-loader?global.fetch!isomorphic-fetch'); do? is that a webpack syntax?

[deontologician]

Yeah, it's webpack syntax. Maybe there's some way we can move that stuff into the webpack config. I think you can apply certain modifiers automatically

[arthurvi]

@rt2zz Bummer, haven't tested it.
Yes it is: Webpack - shimming modules
I have never used it, but you can influence the way dependencies are imported and exported.

[deontologician]

Ok, so we should probably special case fetch in the config to use the imports loader stuff. I'll check it out later today. I've been meaning to look closer at webpack, it's kind of a beast

[alexbezhan]

I'm also having this issue. Any possible temp workaround, guys?

[jvorcak]

+1

[jvorcak]

@flipace what do you mean by "open for non-webpack programmers"? I'm using Webpack and I still get this issue. What do I do wrong? I just import Horizon from '@horizon/client'; and get the error. Shall I install some loader package? Is there some workaround you can think of?

I thought installing npm install imports-loader exports-loader --save would help.

[CoreyTrombley]

Same, I can't use horizon at the moment. This makes me a sad 🐼

[mglukhovsky]

@jvorcak, @CoreyTrombley, @OleksandrBezhan: unfortunately, you're pulling in the source for the client that includes unprocessed Webpack directives. You can try to import the compiled client library with:

import Horizon from '@horizon/client/dist/horizon';

We're working on improving the package to make this easier. Sorry you ran into this!

[jvorcak]

@mglukhovsky is there any workaround you could suggest for now? I'd like to at least experiment and learn till it's ready.

[deontologician]

@jvorcak try importing @horizon/client/dist/horizon this has no webpack directives in it

[jvorcak]

@deontologician thanks for the help. However, this one I tried before and didn't really help. I start getting this error http://pastebin.com/A0J35b9C and the only thing I do is import Horizon from '@horizon/client/dist/horizon';

I've also tried switching to different version, modifying the code with no luck.

In React native I get Unable to resolve module http from .....node_modules/ws/lib/WebSocket.js

[deontologician]

Ok, yeah we need to dig more into this still, sorry you're running into this

[jimthedev]

Hi @deontologician. I see a commit in the next branch. Is this something that fixes this issue so that we can get back to working with horizon and react native?

[flipace]

@jimthedev still waiting for someone to try and see if this fixes the issue for react native too, yes.

[danvass]

@deontologician Are there any updates yet on supporting React Native? Would like to use Horizon in conjunction with React Native but can't seem to resolve this issue.

I tried the latest client from the repo and it resolve the import error but now I am getting this issue:
undefined is not an object (Evaluating ‘window.location.search’) at auth.js:154. Ended up resolving this as well by adding a few things to line 154 but it seems to never fire onReady.

[deontologician]

I've removed fetch in PR #619 , so it's possible that will fix at least part of the problem (one less polyfill). window.location.search is not part of this issue

[daniel1943]

Also having this issue(not using react native) but this boilerplate.

{ Error: Cannot find module 'imports?this=>global!exports?global.fetch!isomorphic-fetch' at Function.Module._resolveFilename (module.js:440:15) at Function.Module._load (module.js:388:25) at Module.require (module.js:468:17) at require (internal/module.js:20:19) at Object.<anonymous> (/home/home/dev/unv/node_modules/@horizon/client/src/util/fetch.js:6:1) at Module._compile (module.js:541:32) at Object.Module._extensions..js (module.js:550:10) at Module.load (module.js:458:32) at tryModuleLoad (module.js:417:12) at Function.Module._load (module.js:409:3) code: 'MODULE_NOT_FOUND' }

[deontologician]

Ok, fetch has been completely removed, along with the webpack directive to make it a global.

[FrancisMurillo]

I am hooking up my react-native app with the horizon server and I am still having the same issues as @DVassilev. Tried using import "@horizon/client" and import "@horizon/client/dist/horizon" and with the same issues as with the isomorphic fetch and window.location.search.

Using version 1.1.3

[jimthedev]

@FrancisMurillo if I understand correctly, this hasn't been released yet to npm. It is in master and will be released with the 2.0 release.