nextjs importeert maar roept geen functie op Module niet gevonden:Fout:kan 'dns' niet oplossen

Dit is een heel subtiel probleem met de server-side code in nextjs.

De fout is duidelijk :u probeert server-side code (mongo-query) uit te voeren in een client-side code. Wat niet duidelijk is, is de oorzaak, want ik weet zeker dat je geen verkeerde code hebt...

Na wat debuggen ontdekte ik dat deze fout optreedt als je je mongo-code importeert en deze niet gebruikt. Zie hieronder hoe u dit kunt vermijden .

Goede en slechte voorbeelden

Dit werkt dus prima:

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

Terwijl dit de fout veroorzaakt:

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

Hoe het te vermijden

Om deze fout te voorkomen, verwijdert u gewoon alle server-side code-import in uw componenten als u niet gebruikt het in getServerSideProps .