Error: The specified module cannot be found. The client package path is not exported from the package

I've encountered an issue while using Next.js and NextAuth with Nginx. My build is failing, and I'm unsure of how to resolve this specific error.

2021-12-06T09:35:02.4779281Z https://nextjs.org/telemetry

2021-12-06T09:35:02.4779648Z

2021-12-06T09:35:02.7626345Z info - Checking validity of types...

2021-12-06T09:35:03.6479273Z warn - No ESLint configuration detected. Run next lint to begin setup

2021-12-06T09:35:03.6504824Z info - Creating an optimized production build...

2021-12-06T09:35:11.0167427Z Failed to compile.

2021-12-06T09:35:11.0168180Z

2021-12-06T09:35:11.0173424Z ModuleNotFoundError: Module not found: Error: Package path ./client is not exported from package /var/www/html/node_modules/next-auth (see exports field in /var/www/html/node_modules/next-auth/package.json)

2021-12-06T09:35:11.0177457Z

2021-12-06T09:35:11.0181521Z

2021-12-06T09:35:11.0184681Z > Build error occurred

2021-12-06T09:35:11.0202372Z Error: > Build failed because of webpack errors

2021-12-06T09:35:11.0203202Z at nextBuildSpan.traceAsyncFn (/var/www/html/node_modules/next/dist/build/index.js:397:19)

2021-12-06T09:35:11.0490267Z npm ERR! code ELIFECYCLE

2021-12-06T09:35:11.0502899Z npm ERR! errno 1

2021-12-06T09:35:11.0522169Z npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7baaefab6a7a797e6f9e7f9e6">[email protected]</a> build: `next build`

2021-12-06T09:35:11.0529617Z npm ERR! Exit status 1

2021-12-06T09:35:11.0538648Z npm ERR!

2021-12-06T09:35:11.0546568Z npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a6773276b7a7a4a3b243a243b">[email protected]</a> build script.

2021-12-06T09:35:11.0554061Z npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

2021-12-06T09:35:11.0650303Z

2021-12-06T09:35:11.0658427Z npm ERR! A complete log of this run can be found in:

2021-12-06T09:35:11.0665933Z npm ERR! /home/ubuntu/.npm/_logs/2021-12-06T09_35_11_056Z-debug.log

2021-12-06T09:35:11.0875406Z ##[error]Bash exited with code '1'.

2021-12-06T09:35:11.0952428Z ##[section]Finishing: npm run build

I could use some guidance on what steps to take next. How can I address this issue? I've been grappling with this problem since this morning.

reactjsnext.jsazure-pipelinesnext-auth

Answer №2

When using next-auth/react, the Provide component has been updated to SessionProvider. The revised code should look like this:

import { SessionProvider } from "next-auth/react"

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session} refetchInterval={5 * 60}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

Click here for more information on upgrading to version 4 of next-auth.

Answer №3

My suggestion would be to incorporate "next-auth": "^3.29.0", as this particular version of next-auth seems optimal.

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

The bond between TypeORM and express

I am working on establishing Many-to-One and One-to-Many relationships using TypeORM and MySQL with Express. The database consists of two tables: post and user. Each user can have multiple posts, while each post belongs to only one user. I want to utilize ...

javascriptnode.jsreactjsexpresstypeorm

How can I trigger the isLoading animation manually within a custom action in material-table?

I am currently utilizing the material-table library and I am interested in using the loading animation that is included in the library for a custom asynchronous operation. The desired functionality is to have the loading animation turn on when a custom a ...

reactjsmaterial-table

I am puzzled as to why my Details Modal keeps appearing whenever I click anywhere, even when I have specifically added it to only show up on the event of today. Additionally, I am encountering

ERROR Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref at coerceRef (http://localhost:3000/static/js/bundle.js:59386:21) at createChil ...

javascriptreactjsreact-big-calendarlocalforage

React component that enables radio inputs to repeat upon selection

My current project involves creating a quiz app where users can answer single questions using React on Codepen. I am utilizing an API to fetch a question, along with 3 incorrect answers and 1 correct answer, then storing them in the app's state. Howev ...

javascriptreactjs

Ways to display a price near a whole number without using decimal points

Currently, I am working on an ecommerce project where the regular price of an item is $549. With a discount of 12.96% applied, the sale price comes down to $477.8496. However, I want the sale price to be displayed as either $477 or $478 for simplicity. Yo ...

javascriptreactjsmathecmascript-6e-commerce

A guide to customizing nested elements in react using styled-components

Currently, I am utilizing styled components to apply styles to a child element inside a div using nested css. For a demonstration, you can view my example here const customStyles = theme => ({ root: { ...theme.typography.button, background ...

cssreactjs

Link a React application with a NextJs application to create a seamless integration

I'm working on a React dashboard and I'm looking to incorporate a link to a Next.js app within the dashboard. The Next.js app will exist in a separate codebase. There is no need for shared data between these two applications. Should I simply cr ...

reactjsnext.js

When rendering a Link element as a child of a Router using ReactDOM.render, a warning message is displayed stating "It is inappropriate to utilize <Link> outside of a <Router>"

Seeking a solution for integrating ReactDOM.render to generate a Link within a React Router. The setup resembles the following: const router = ( <div> <Router> <Route path="/map" component={Map}/> </Router> </d ...

reactjsreact-routerleafletreact-router-v4react-router-dom

Implementing unique union type in React: Effective ways to declare typescript type for prop value

I am currently facing an issue where I need to set a specific type for a prop value. However, the challenge lies in the fact that the types are string unions which can vary depending on the usage of the React Component. Let me provide you with the TypeScr ...

reactjstypescript

Improprove performance on React JS Material UI DataGrid by efficiently merging data from multiple tables

I am currently working with a dataGrid in React and Material UI. The data is sourced from table A, which has the following structure: {Name: foo, Surname: Fry, Job Position: 3} Additionally, there is table B that contains mappings of job positions to actu ...

reactjsmaterial-uidatagrid

Attention: It is not possible to update the React state on a component that is not mounted. Please use the useEffect cleanup function

Can you assist with solving this issue? //ReviewProductDetail.jsx : Initially, the page was populated from this particular component import React, { useEffect, useState } from 'react'; import RatingCardProductDetail from '../../components ...

javascriptreactjspromise

Optimizing API Pagination and Search using Symfony and React: A Comprehensive Guide

I'm currently developing a Fullstack App that combines Symfony 6.4 and React.js. I have a question regarding pagination and search functionality. Pagination My current setup involves implementing pagination in Symfony, where the API fetches 10 items ...

phpreactjssymfony

typescriptIs there a more efficient approach to typing optional values without a default value in

In my React application with TypeScript, I am using the following code to provide typed props: type ScheduleBoxContentProps = { desc: ReactNode, lottie: LottieProps, } & Partial<{className: string}>; I want the className prop to be optional ...

reactjstypescript

Guide on how to deactivate the Navbar component on specific dynamic routes in next.js

I have found one method to achieve this using the next router, specifically for static routes like /dashboard'. However, I am searching for a solution for dynamic URLs such as '/story/[slug]'. Layout.js const Layout=({children })=>{ i ...

urlnext.jsnext-routerdynamic-routing

The text displayed using react-pdf appears in various locations on the page

In my project, I am working on incorporating react-pdf to display Hebrew PDF files. I am looking to make specific words clickable with links to other pages, like Wikipedia. To achieve this, I am experimenting with a customTextRenderer function, focusing on ...

reactjspdftexthyperlinkreact-pdf

Guide to running the create-react-app build version

Recently, I created a test React application using create-react-app. To launch it, I used yarn start, but to my surprise, it started the debug version of the application. After running npm run build, a build folder was generated. However, even when I tri ...

reactjsnpmcreate-react-appyarnpkg

What is the best way to display user input within a paragraph using React?

I've been working on a To-Do list and I have successfully implemented the functionality to add new tasks. The issue I'm facing is that when I try to add a task, it doesn't show up in the paragraph within my Todo component, even though I can ...

javascriptreactjsfirebasegoogle-cloud-firestorereact-props

Encountering an unusual issue: Unable to access undefined properties (specifically 'get')

I'm struggling to get the order history screen to display the order history of a specific user. Every time I navigate to the path, I encounter the error mentioned in the title. I double-checked the path for accuracy and made sure there are no spelling ...

javascriptreactjsexpress

The process of testing the catch part in jest and @testing-library/react

ComponentFile.js <Button onClick={ async e =>{ clearForm(); }} Reset </Button> const clearForm = () => { try{ someRef.current.clearFormData(); const display = document.getElementById("errorDisplayDi ...

reactjsunit-testingjestjsreact-testing-librarybabel-jest

Having trouble with state not updating correctly after making a fetch request within a useEffect hook in

In my React app with an Express backend, I am facing a challenge in updating the component state using the useEffect hook to trigger once when the component renders. Inside the useEffect, I fetch data from the Express server. const Favorites = ({ user }) = ...

javascriptreactjsfetchuse-effectuse-state