Error encountered during the "next build" process: Next Js - Providers/getProviders() returns a Fetch

Currently, I am in the process of developing my application using Next.js and implementing providers with next-auth. Everything runs smoothly when I use "npm run dev", however, I encounter an error when I switch to "npm run build". Here is a screenshot of the error: https://i.sstatic.net/0c29X.png

In order to handle authentication properly, I have set the variable NEXTAUTH_URL = localhost:3000 in a .env.local file.

The issue arises specifically when the function "getProviders()" is called from a file similar to this:

import {getProviders, useSession} from 'next-auth/client'
import Layout from "../components/layout";


export default function Page({providers}) {
    const [session, loading] = useSession()

    return (
        <Layout providers={providers}>Page index</Layout>
    )
}

export async function getStaticProps() {
    const providers = await getProviders()

    return {
        props: {providers}
    }
}

Answer №1

I am facing a similar issue. Encountering ECONNREFUSED error during 'next build', but it works fine with 'next dev'

However, I managed to resolve it.

import {getProviders, useSession} from 'next-auth/client'
import Layout from "../components/layout";

export default function Page() {
    const [session, loading] = useSession()
    const [providers, setProviders] = useState({});

    useEffect(() => {
      (async () => {
        const res = await getProviders();
        setProviders(res);
      })();
    }, []);

    return (
        <Layout providers={providers}>This is the index page</Layout>
    )
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for me to automatically add a line break following every image that is fetched from the Flickr API?

Hello there! I'm facing a little challenge with inserting a line break after each image that loads from the Flickr API. It's tricky to manipulate the style of data that hasn't loaded in the browser yet. I've experimented with using the ...

What sets apart "import { pick } from 'lodash';" from "import pick from 'lodash/pick';"?

Can you explain the difference between import { pick } from 'lodash'; and import pick from 'lodash/pick'; (Keep in mind that it's 'lodash/pick' in the second one, not just 'lodash'.) How do they each impact ...

Submitting Form data to MySQL database with Node.js using Express framework

Currently, I'm working on a server.js file in Node that is intended to send form data from an HTML file to MySQL. However, I seem to be encountering a syntax error with my code. Below, you'll find the code snippet along with the specific error me ...

Setting up TLS for NextJS based applications with @improbable-eng/grpc-web

Currently, in the process of developing my web application using NextJS, I have incorporated https://github.com/improbable-eng/grpc-web for facilitating communication between frontend and backend. The React element below exemplifies the utilization of grpc ...

Tips for sending a function in an AJAX request from jQuery to a Node.js server

This is the code I'm working with: let url = "/blabla"; let ajax_options = { data:{ params_list:{ sortFunction: (x, y) => parseFloat(x) - parseFloat(y); } } }; $.ajax(url,ajax_options).then((res) => { //d ...

Click event handling in JavaScript - Manipulating HTML tables

Currently, I am delving into the world of JavaScript and have been focused on experimenting with Mouse events to gain a deeper understanding of their functionality. <html> <head> <title>Mouse Events Example</title> <scri ...

Is a Page Refresh Required to Reload Routes in ReactJS?

I have created menu links labeled Home, About, What I Do, and Experience for my portfolio site using BrowserRouter. However, when I click on these links, the components do not load properly on the page; they only render correctly after a page refresh. This ...

I am looking for an alternative approach to retrieve the data from the controller in case of success instead of the method provided in the code below

In this code snippet, I am looking for an alternative way to retrieve data from the controller upon successful execution, rather than checking it as data.msg. I want to avoid using strings or boolean values like SuccessWithPass. Controller snippet: if ...

Apply a watermark specifically to fancybox for images in galleries, excluding non-gallery items

I recently encountered an issue with a FancyBox image gallery on my webpage. I wanted to add a watermark to the gallery items, so I followed an example from the FancyBox page at http://jsfiddle.net/w5gQS/. beforeShow: function () { $('<div class=" ...

How can you dynamically set a date range using jQuery Datepicker, utilizing both the methods setDate and (minDate and maxDate)?

Within my interface, I have a dropdown menu where I can select the year, alongside another calendar field that utilizes a datepicker feature. The desired functionality is as follows: when I choose the year 2021 from the dropdown, the default date should a ...

The compatibility issues between bcrypt and Next.js 14.0 are causing functionality errors

I'm currently working on implementing an Infinite scrolling feature for displaying posts. This requires utilizing a client component with the use client directive. However, I've encountered an issue: Module parse failed: Unexpected token (1:0) ...

Determining the Last Modified Date for a Sitemap using Javascript

I am trying to replicate the date format shown within <lastmod></lastmod> tags in a sitemap.xml file. How can I do this? The desired output is as follows: <lastmod>2016-01-21EEST18:01:18+03:00</lastmod> It appears that 'EEST ...

Exploring the functionalities of Node Express 3x with socket IO through testing

I attempted to integrate socket IO into my project, but unfortunately, I couldn't get it to work properly. This is my app.js: /** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); va ...

Adjust the autofocus to activate once the select option has been chosen

Is there a way to automatically move the cursor after selecting an option from a form select? <select name="id" class="form-control"> <option>1</option> <option>2</option> <option>3</option&g ...

The process of extracting a value from an array of objects encountered an error due to the undefined object

I am looking to extract the value from an array within an object while also implementing error checking. The code I currently have checks if a specific key exists in the object and if the value associated with that key is of type array. If both condition ...

Deleting the first element of an array in JavaScript using Node.js

I'm struggling to remove the first element of an array. When I try to use slice(1,1) or shift, I can't seem to retain a list. For instance, my array: [1499783769720,"54:52:00:62:46:66","54:52:00:b0:fa:57","54:52:00:8f:d9:7c","54:52:00:e7:67:10" ...

Error message: The Liferay JavaScript Function has not been defined

I am a newcomer to Liferay and have been attempting to utilize Ajax within my scripts, but unfortunately, the code does not seem to load correctly in the browser. I even tried testing it by simply adding an alert. Every time I try, I encounter the "functi ...

A guide on parsing a stringified HTML and connecting it to the DOM along with its attributes using Angular

Looking for a solution: "<div style="text-align: center;"><b style="color: rgb(0, 0, 0); font-family: "Open Sans", Arial, sans-serif; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing e ...

Login should only be tried when the error code is 403

I have encountered an issue with checking if the API token is expired. The process involves making a GET call, and if a 403 error is received from the API, then re-login is required. This is what I tried: app.get = async (body) => { return new Pro ...

Utilize a Chrome Content Script to intercept jQuery delegated event handlers and take control

After developing a Chrome extension that intercepts form submissions in specific circumstances, I encountered an issue with a particular website utilizing jQuery's delegate function. My extension is built with raw JavaScript, excluding jQuery to prev ...