nextjs importe mais n'invoque pas la fonction lance Module introuvable :erreur :impossible de résoudre 'dns'

C'est un vrai problème subtil avec le code côté serveur dans nextjs.

L'erreur est évidente :vous essayez d'exécuter du code côté serveur (requête mongo) dans un code côté client. Ce qui n'est pas évident, c'est la cause, car je suis sûr que vous n'avez pas un mauvais code...

Après quelques débogages, j'ai découvert que cette erreur est générée si vous importez votre code mongo et ne l'utilisez pas. Voir ci-dessous pour comprendre comment l'éviter .

Bons et mauvais exemples

Donc, cela fonctionne bien :

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

Bien que cela génère l'erreur :

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

Comment l'éviter

Pour éviter cette erreur, supprimez simplement toute importation de code côté serveur dans vos composants si vous n'utilisez pas dans getServerSideProps .