Issue found when installing 'request' package

[javlc]

I installed require npm package on app, imported it in react module, and got this error:

Error in ./~/request/lib/har.js
Module not found: Error: Cannot resolve module 'fs' in D:\projects\date-range-picker\node_modules\request\lib
 @ ./~/request/lib/har.js 3:9-22

Error in ./~/request/~/forever-agent/index.js
Module not found: Error: Cannot resolve module 'net' in D:\projects\date-range-picker\node_modules\request\node_modules\forever-agent
 @ ./~/request/~/forever-agent/index.js 6:10-24

Error in ./~/request/~/forever-agent/index.js
Module not found: Error: Cannot resolve module 'tls' in D:\projects\date-range-picker\node_modules\request\node_modules\forever-agent
 @ ./~/request/~/forever-agent/index.js 7:10-24

Error in ./~/request/~/tough-cookie/lib/cookie.js
Module not found: Error: Cannot resolve module 'net' in D:\projects\date-range-picker\node_modules\request\node_modules\tough-cookie\lib
 @ ./~/request/~/tough-cookie/lib/cookie.js 32:10-24

Error in ./~/request/~/tunnel-agent/index.js
Module not found: Error: Cannot resolve module 'net' in D:\projects\date-range-picker\node_modules\request\node_modules\tunnel-agent
 @ ./~/request/~/tunnel-agent/index.js 3:10-24

Error in ./~/request/~/tunnel-agent/index.js
Module not found: Error: Cannot resolve module 'tls' in D:\projects\date-range-picker\node_modules\request\node_modules\tunnel-agent
 @ ./~/request/~/tunnel-agent/index.js 4:10-24

Is a very similar issue to what's described here:
request/request#1691

In the issue above is indicated to tweak the webpack.config.js file to cater for those elements that are being called.

Is there any known workaround for this?

[gaearon]

What is your use case for request in a client-side app?
If you just need to make an AJAX request, use window.fetch instead.
We include a polyfill for it.

[javlc]

I want to consume an external server api (not a localhost one, but on another external domain).
I will go the fetch() way then, didn't know about the polyfill feature. Thanks!

[gaearon]

fetch() works with any domain as long as CORS is configured on it.
And if it's not, we let you specify "proxy" option in package.json which will automatically proxy all unrecognised requests to the specified server.
You can find more instructions in the generated README of your project, or in template/README.md in this repo.

[javlc]

Hello @gaearon,
I have tried this from a couple of angles, but could not make it to work.
I set up the proxy url, constructed my query call, yet still the fetched url has http://localhost:3000 prepended to the api call. Image below:

In summary: I am setting the proxy url to: "proxy": "https://holidayapi.com/v1", then added the string /api/ in the fetch() call, appended my constructed query, and it did not work ok.

You may see the code in my react-date-range repo, use-fetch branch.
You may check the forms.js file, and the package.json one.

[gaearon]

then added the string /api/ in the fetch() call

You don’t need to. Why did you do this?

We don’t treat URLs starting with /api in any special way. We just prepend the proxy URL to the URL you pass to fetch().

So it tried to load https://holidayapi.com/v1/api/holidays because that’s what you get by concatenating https://holidayapi.com/v1 and /api/holidays. You probably meant fetch('/holidays') instead.

[gaearon]

Verified that this fixes the problem in your repo:

         function search(query) {
-            return fetch(`/api/holidays?${query}`, {
+            return fetch(`/holidays?${query}`, {
                 accept: 'application/json',                
             }).then(checkStatus)
             .then(parseJSON);
@@ -129,7 +129,7 @@ class Form extends Component {
           return response.json();
         }

-        search(querystring);
+        search(querystring).then(result => console.log(result));

     }

[javlc]

You are right indeed!
I (mistakenly) was thinking that somehow /api/ was a keyword that would be replaced by the url set in proxy field, in package.json.

Thank you heaps for the given code correction. Now it all works as expected!