nextjs importera men anropa inte funktionskast Modulen hittades inte:Fel:Kan inte lösa 'dns'

Det här är ett riktigt subtilt problem med serversidans kod i nextjs.

Felet är uppenbart :du försöker köra kod på serversidan (mongo-fråga) i en kod på klientsidan. Det som inte är uppenbart är orsaken, för jag är säker på att du inte har fel kod...

Efter lite felsökning upptäckte jag att det här felet uppstår om du importerar din mongo-kod och inte använder den. Se nedan för att förstå hur du undviker det .

Bra och dåliga exempel

Så det här fungerar bra:

import { findUsers } from '../lib/queries'

function Home({ users }) {
  return (
    <h1>Users list</h1>
    //users.map and so on...
  )
}

export async function getServerSideProps() {
  const users = await findUsers()
  return {
    props: {
      users: users
    }
  }
}

export default Home

Medan detta kommer att skicka felet:

import { findUsers } from '../lib/queries'

function Home({ users }) {
  return (
    <h1>Users list</h1>
    //users.map and so on...
  )
}

export async function getServerSideProps() {
  // call disabled to show the error
  // const users = await findUsers()
  return {
    props: {
      users: [] //returned an empty array to avoid other errors
    }
  }
}

export default Home

Hur man undviker det

För att undvika det här felet, ta bara bort eventuell kodimport på serversidan i dina komponenter om du inte använder det i getServerSideProps .