nextjs importerer, men start ikke funktionskast Modul ikke fundet:Fejl:Kan ikke løse 'dns'

Dette er et reelt subtilt problem med serversidekode i nextjs.

Fejlen er oplagt :du forsøger at udføre serversidekode (mongo-forespørgsel) i en klientsidekode. Hvad der ikke er indlysende er årsagen, for jeg er sikker på, at du ikke har en forkert kode...

Efter noget debug opdagede jeg, at denne fejl opstår, hvis du importerer din mongo-kode og ikke bruger den. Se nedenfor for at forstå, hvordan du undgår det .

Gode og dårlige eksempler

Så det fungerer fint:

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

Mens dette vil kaste fejlen:

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

Sådan undgår du det

For at undgå denne fejl skal du blot fjerne enhver import af serversidekode i dine komponenter hvis du ikke bruger det i getServerSideProps .