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

Question

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

Geostatic

Give us the code where you call the 'dns' module please – Turbary

Answer 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

Ably

I've been bitten by this a couple of times. The error messages aren't helpful at all. – Robers

Not Mongo but I had a similar issue that was resolved similarly. – Lubric

My problem was I called getServerSideProps() as getServerSiderProps() ... some days haha – Apartment

It doesn't make sense for me. Some files in my root/lib/ can be used correctly, but some are not. How come? – Stole

Answer 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

Oxonian

I had my mongodb class inside utils folder next to pages folder but still got this error. Removing import for the mongodb stuff in index.js helped – Gunshy

Your solution worked for me. I had my lib folder inside pages folder. My lib folder had dbconnection code. – Sunbreak

Answer 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

Hamsun

Answer 4

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

Zoltai

Answer 5

I created a directory called 'api-lib' in my project root directory to add my queries and that caused this error to appear. And I solved it by moving my 'api-lib' directory into the main 'src' directory.

Quadrisect

Answer 6

My issue was exporting getServerSideProps with all of it's server side operations from a component, where it should only be placed and exported from a PAGE component.

Moving getServerSideProps to the main page component and just drilling down what I needed to the child component solved it for me.

Pipsqueak