nextjs-Import, aber Funktion nicht aufrufen löst Modul nicht gefunden:Fehler:„dns“ kann nicht aufgelöst werden

Dies ist ein wirklich subtiles Problem mit serverseitigem Code in nextjs.

Der Fehler ist offensichtlich :Sie versuchen, serverseitigen Code (Mongo-Abfrage) in einem clientseitigen Code auszuführen. Was nicht offensichtlich ist, ist die Ursache, weil ich sicher bin, dass Sie keinen falschen Code haben...

Nach einigem Debuggen habe ich festgestellt, dass dieser Fehler ausgelöst wird, wenn Sie Ihren Mongo-Code importieren und ihn nicht verwenden. Weitere Informationen zur Vermeidung finden Sie weiter unten .

Gute und schlechte Beispiele

Das funktioniert also gut:

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

Während dies den Fehler auslöst:

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

Wie man es vermeidet

Um diesen Fehler zu vermeiden, entfernen Sie einfach jeden serverseitigen Codeimport in Ihren Komponenten, wenn Sie ihn nicht verwenden es in getServerSideProps .