'nextjs import but don't invoke function throws Module not found: Error: Can't resolve 'dns'

My project(NextJS) was working fine and suddenly I am experiencing the issue ModuleNotFoundError. Particularly in the case of dynamic routing of nextJs.

Error I see is: Module not found: Error: Can't resolve 'dns'

In the pages directory pages/programs/[programtype]/[program].jsx when mongo is imported, it throws:

ModuleNotFoundError: Module not found: Error: Can't resolve 'dns' in 'node_modules/mongodb/lib'

Full error dump:

ModuleNotFoundError: Module not found: Error: Can't resolve 'dns' in '/project-path/node_modules/mongodb/lib'
    at /project-path/node_modules/webpack/lib/Compilation.js:925:10
    at /project-path/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /project-path/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /project-path/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /project-path/node_modules/neo-async/async.js:2830:7
    at /project-path/node_modules/neo-async/async.js:6877:13
    at /project-path/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /project-path/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /project-path/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/project-path/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /project-path/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /project-path/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/project-path/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /project-path/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/project-path/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /project-path/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
mongodbnpmnext.jsnode-mongodb-native


Solution 1:[1]

The problem

This is a subtle problem with server-side code in Next.js.

The error is clear - you're trying to execute server side code (mongo query) in a client side code. But the cause is not obvious, because with Next.js you should be able to call Mongo from your components.

The cause

Next.js throws this error because you are importing your mongo code without using it.

It sounds weird but it is true.

How to avoid it

To avoid this error just remove any server-side code import in your components if you don't use it in getServerSideProps.

It sounds even more weird but it is true.

Good and bad examples

This works fine:

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

While this will throw the error:

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: [] //returning an empty array to avoid other errors
    }
  }
}

export default Home

Solution 2:[2]

Keep your server-side coding modules (for e.g: models, database connection maker) outside of the Page directory.

For reference: https://nextjs.org/docs/messages/prerender-error

Solution 3:[3]

If you're getting this error with Next-js auth, make sure your "lib" folder is in the root directory.

Here's the structure

Solution 4:[4]

my problem was that i used a function in initialprops wich was exported via module.exports instead of export default

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Kesava Muthu
Solution 3 Bharadwaj Giridhar
Solution 4 constantijn van hartesveldt

Related Questions