nextjs importa, mas não invoca a função lança Módulo não encontrado:Erro:Não é possível resolver 'dns'

Este é um problema sutil real com o código do lado do servidor em nextjs.

O erro é óbvio :você está tentando executar o código do lado do servidor (consulta mongo) em um código do lado do cliente. O que não é óbvio é a causa, porque tenho certeza que você não tem um código errado...

Após alguma depuração, descobri que esse erro é gerado se você importar seu código mongo e não usá-lo. Veja abaixo para entender como evitá-lo .

Bons e maus exemplos

Então, isso funciona bem:

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

Enquanto isso lançará o erro:

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

Como evitar

Para evitar esse erro, basta remover qualquer importação de código do lado do servidor em seus componentes se você não usar em getServerSideProps .