NextJS getInitialProps and proxy of my company

[VadimGorbenko]

Hello everyone!
Help required.

I am now on NextJS learning guid. Lesson №6 - fetching data. Step №3.
When i do all steps in lesson, where we first time trying to fetch data from external public api in getInitialProps(https://api.tvmaze.com/search/shows?q=batman) and type in terminal "npm start dev", dev server is started on localhost:3000, but i get an error:

request to https://api.tvmaze.com/search/shows?q=batman failed, reason: connect ECONNREFUSED 88.99.29.81:443

FetchError: request to https://api.tvmaze.com/search/shows?q=batman failed, reason: connect ECONNREFUSED 88.99.29.81:443
    at ClientRequest.<anonymous> (C:\Sandbox\React training\test3NextJsLearning\next-learn-demo-master\6-fetching-data\node_modules\node-fetch\lib\index.js:1455:11)
    at emitOne (events.js:116:13)
    at ClientRequest.emit (events.js:211:7)
    at TLSSocket.socketErrorListener (_http_client.js:387:9)
    at emitOne (events.js:116:13)
    at TLSSocket.emit (events.js:211:7)
    at emitErrorNT (internal/streams/destroy.js:64:8)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)

I spend alot of time in search how to solve it and find this - marked as duplicate of next one but it seems that its dosnt work for me.

I have .npmrc file with next config:

strict-ssl=false
registry=http://registry.npmjs.org/
http-proxy= http://myCompanyProxy:8080
https-proxy= http://myCompanyProxy:8080

both are http.

---

I start feel myself a little bit silly because i still dont understand how to fix it :c

System:
OS: Windows 7
Binaries:
Node: 8.10.0
npm: 6.7.0
Browsers:
Firefox: 68.0.2,
IE: 11,

P.s. i wanted write this in spectrum chat, but i have crashed websocket connection and my FF trying to reconnect in loop.

[timneutkens]

Seems like your internal network is just not allowing connecting to the specified url 🤔 The specific API is not down (just checked) 🤔

[VadimGorbenko]

Seems like your internal network is just not allowing connecting to the specified url thinking The specific API is not down (just checked) thinking

It happend only on builded page. If i run request to this api from browser console - i get response.

[timneutkens]

That's very strange 🤔 Maybe there's network policies, but I can't imagine any company being that strict.

[VadimGorbenko]

@timneutkens in one of the links, that i write in topic, described similar behavior. Like nextjs or something inside nextjs trying to check something and crash and thats why it happend. It resolved with "update update-check to 1.4", but... So, problem should be somewhere inside (And ofcourse in proxy).

Maybe i need to do something with update-check, i dont understand...

[timneutkens]

@VadimGorbenko sounds like you're on a really old version of Next.js, can you try to npm install next in the project dir.

[VadimGorbenko]

@timneutkens I have fresh version - 9.0.0

[timneutkens]

That does not include update-check

[VadimGorbenko]

Ye, i write that message as example, that similiar behavior not new and problem was in update-check. I am dont know where problem is now.

[VadimGorbenko]

Still actual

[timneutkens]

We can't really do anything here, there is no reproduction.

[lfades]

I'm closing the issue because I can't reproduce it and the lesson is working as intended, if the issue persists please provide a reproduction 🙏

[kbychkov]

Hello @VadimGorbenko! I confirm that the issue is related with the proxy. I have the similar problem and I was not able to solve that. Below are several ways you could try for yourself. Perhaps you'll be more lucky.

Use axios instead of unfetch. Thus you will be able to control the proxy settings. Here you have the two options:

1. Config proxy settings:

Index.getInitialProps = async function() {
  const config = {
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    }
  }
  const res = await axios.get('https://api.tvmaze.com/search/shows?q=batman', config);
  const data = await res.json();

  console.log(`Show data fetched. Count: ${data.length}`);

  return {
    shows: data.map(entry => entry.show)
  };
};

2. Config httpsAgent option using https-proxy-agent:

import HttpsProxyAgent from 'https-proxy-agent';

...

Index.getInitialProps = async function() {
  const config = {
    httpsAgent: new HttpsProxyAgent(process.env.https_proxy)
  }
  const res = await axios.get('https://api.tvmaze.com/search/shows?q=batman', config);
  const data = await res.json();

  console.log(`Show data fetched. Count: ${data.length}`);

  return {
    shows: data.map(entry => entry.show)
  };
};

For this to work you should fix webpack config slightly. Create next.config.js file:

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        net: 'empty',
        tls: 'empty'
      }
    }

    return config
  }
}

[hamakihito]

Hi, I had stacked as above but solved by following @kbychkov code, so I show the code for an example.

import Layout from '../components/MyLayout'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'
import HttpsProxyAgent from 'https-proxy-agent'
import axios from 'axios'

const Index = props => (
  <Layout>
    <h1>Batman TV Shows</h1>
    <ul>
      {props.shows.map(show => (
        <li key={show.id}>
          <Link href="/show/[id]" as={`/show/${show.id}`}>
            <a>{show.name}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = async function() {
  const config = {
    httpsAgent: new HttpsProxyAgent(process.env.npm_config_https_proxy)
  }
  const res = await axios.get('https://api.tvmaze.com/search/shows?q=batman', config);
  const data = await res.data;

  console.log(`Show data fetched. Count: ${data.length}`);

  return {
    shows: data.map(entry => entry.show)
  };
}

export default Index

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.