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

Total
18
Shares

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

My page structure where it’s not working
pages/programs/[programtype]/[program].jsx

"mongodb": "^3.5.9"

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

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

Solution

This is a real subtle problem with server side code in nextjs.

The error is obvious: you’re trying to execute server side code (mongo query) in a client side code. What isn’t obvious is the cause, because I’m sure you don’t have a wrong code…

After some debug I discovered that this error is thrown if you import your mongo code and don’t use it. See below to understand how to avoid it.

Good and bad examples

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

export default Home

How to avoid it

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

Leave a Reply

Your email address will not be published. Required fields are marked *