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

Give us the code where you call the 'dns' module please – Ahmad MOUSSA Nov 08 '20 at 15:52 — Ahmad MOUSSA, Nov 08 '20 at 15:52

lifeisfoo · Accepted Answer · 2022-04-08T14:35:42.587

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

I've been bitten by this a couple of times. The error messages aren't helpful at all. — Matt Sugden, Feb 16 '21 at 17:27
Not Mongo but I had a similar issue that was resolved similarly. — Julien, Mar 16 '21 at 00:42
My problem was I called `getServerSideProps()` as `getServerSiderProps()` ... some days haha — Matthew Trent, May 05 '22 at 07:50
It doesn't make sense for me. Some files in my `root/lib/` can be used correctly, but some are not. How come? — m3.b, Mar 01 '23 at 18:19

score 1 · Answer 2 · answered Mar 29 '21 at 10:06

1

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

answered Mar 29 '21 at 10:06

Kesava Muthu

21
3

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 – JanBrus May 31 '21 at 07:15
Your solution worked for me. I had my `lib` folder inside `pages` folder. My `lib` folder had dbconnection code. – Anirudh Jun 23 '22 at 08:59

score 0 · Answer 3 · answered Dec 15 '21 at 14:45

0

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

Here's the structure

answered Dec 15 '21 at 14:45

Bharadwaj Giridhar

977
11
15

score 0 · Answer 4 · answered Mar 25 '22 at 09:44

0

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

answered Mar 25 '22 at 09:44

constantijn van hartesveldt

21
1
4

score 0 · Answer 5 · answered Sep 15 '22 at 16:18

0

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.

answered Sep 15 '22 at 16:18

Mohammad Tbeishat

961
6
15

score 0 · Answer 6 · answered Feb 06 '23 at 18:44

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.

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

6 Answers6

The problem

The cause

How to avoid it

Good and bad examples

Linked