Error: connect ECONNREFUSED on Vercel but not locally

[ghost]

The last time I deployed to Vercel was a month or 2 ago and I had no problem. I didn't actually change any code now, I just updated my npm packages and tried to deploy. I get this error:

Error occurred prerendering page "/en-GB/gallery". Read more: https://nextjs.org/docs/messages/prerender-error
--
12:59:58.674 | Error: connect ECONNREFUSED 127.0.0.1:80
12:59:58.674 | at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)
13:00:00.420 |  
13:00:00.420 | Error occurred prerendering page "/en-GB". Read more: https://nextjs.org/docs/messages/prerender-error
13:00:00.420 | Error: connect ECONNREFUSED 127.0.0.1:80
13:00:00.421 | at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1159:16)
13:00:00.421 |  
13:00:00.421 | > Build error occurred

Running npm run build on my local machine works fine. It is just when deploying to Vercel I get the error but not sure why. Does anyone have any idea?

Here is my config file:

module.exports = {
  images: {
    domains: ["localhost", "api.mywebsite.co.uk"],
  },
  i18n: {
    locales: ["en-GB"],
    defaultLocale: "en-GB",
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      require("./scripts/generate-sitemap");
    }

    return config;
  },
  async headers() {
    return [
      {
        source: "/:all*(svg|jpg|png)",
        locale: false,
        headers: [
          {
            key: "Cache-Control",
            value: "public, max-age=9999999999, must-revalidate",
          },
        ],
      },
    ];
  },
};

It seems like issue is somewhere in my dynamic paths...

export async function getStaticProps({ params }) {
  const client = new ApolloClient({
    uri: process.env.NEXT_PUBLIC_API_GRAPHQL,
    cache: new InMemoryCache(),
  });

  const { data } = await client.query({
    query: gql`
      {
        product(
          id: "${params.slug}"
          idType: SLUG
        ) {
          name
          seo {
            canonical
            title
            metaDesc
          }
          courseAcf {
            courseDuration
            daysAndTimes {
              courseDay
              courseTime
            }
          }
          ... on SimpleProduct {
            databaseId
            name
            regularPrice
            shortDescription(format: RAW)
            description
            featuredImage {
              node {
                mediaItemUrl
              }
            }
          }
        }
      }
    `,
  });

  return {
    props: {
      courseData: data.product,
      courseSlug: params.slug,
    },
    revalidate: 30,
  };
}

export async function getStaticPaths() {
  const client = new ApolloClient({
    uri: process.env.NEXT_PUBLIC_API_GRAPHQL,
    cache: new InMemoryCache(),
  });
  const { data } = await client.query({
    query: gql`
      {
        products {
          nodes {
            slug
            name
            databaseId
          }
        }
      }
    `,
  });

  const pathsWithParams = data.products.nodes.map((course) => ({
    params: { slug: course.slug },
  }));
  return {
    paths: pathsWithParams,
    fallback: "blocking",
  };
}

[thibautsabot]

Hello.

Error: connect ECONNREFUSED 127.0.0.1:80 means that you are trying to access localhost.
While it would work on your machine, it won't work on a production environment.

You need to provide the correct URL to your application. (look for hardcoded 127.0.0.1 or localhost in your code)

[bailakahn]

I have the same error
Error Error: connect ECONNREFUSED 127.0.0.1:587
and there is no occurence of localhost or 127.0.0.1:

Here is the code

fetch("api/send", { method: "POST", body: JSON.stringify(fields) }) .then((res) => res.json()) .then(({ success }) => { if (success) { setStatus({ ...status, submitted: true }); setTimeout(() => setStatus({ ...status, submitted: false }), 10000); } });

[joelwmale]

Try fetch("/api/send"

[sanddrika]

this doesn't work for me

[dimer191996]

can someone find a solution for this @melono6

[ghost]

Not sure if this is helpful but I did find that the environment variables didn’t seem to be working. I did something you aren’t supposed to do but it was just a test so no big deal. Anyway, I didn’t exclude my environment variables in gitignore and it seemed to work as the site was reading them from the actual application and not from Vercel environment variables.

…

On 28 Apr 2022, at 17:08, Dimer Bwimba ***@***.***> wrote: can someone find a solution for this @melono6 <https://github.com/melono6> — Reply to this email directly, view it on GitHub <#32420 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG7HWLL6JRFI7B4UYUD53GLVHKSXNANCNFSM5J4ESWEQ>. You are receiving this because you authored the thread.

[maheshwaghmare]

Ah! What If I try:

const response = await fetch('https://github.com');

Getting the same error as:

cause: Error: connect ECONNREFUSED 127.0.0.1:80
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1187:16) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 80
  }

[mandorakannu]

replace: process.env.NEXT_PUBLIC_API_GRAPHQL to process.env.VERCEL_URL
checkout this page https://vercel.com/docs/concepts/projects/environment-variables/system-environment-variables

[Huangjiafua]

I had the same problem, I went back and looked at the connection status of the database, I reconnected and deployed normally.

[codersjj]

I went back to Vercel's Storage page, clicked "Connect Project", and reconnected my current project. After that, the deployment succeeded

[windmaomao]

You can import .env from local to /settings/environment-variables of your site. So this is the interesting thing, server component is prebuild, which means if it uses database data, the data will rely on that build time.