nextjs 导入但不调用函数抛出未找到模块：错误：无法解析“dns”答案

【问题标题】：nextjs import but don't invoke function throws Module not found: Error: Can't resolve 'dns'nextjs 导入但不调用函数抛出未找到模块：错误：无法解析“dns”
【发布时间】：2022-04-08 22:35:42
【问题描述】：

我的项目（NextJS）运行良好，突然我遇到了ModuleNotFoundError 的问题。尤其是在 nextJs 的动态路由的情况下。

我看到的错误是：Module not found: Error: Can't resolve 'dns'

在pages目录pages/programs/[programtype]/[program].jsx导入mongo时会抛出：

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

【问题讨论】：

请提供您调用“dns”模块的代码

标签： mongodb npm next.js node-mongodb-native

【解决方案1】：

问题

这是 Next.js 中服务器端代码的一个微妙问题。

错误是 clear - 您正在尝试在客户端代码中执行服务器端代码（mongo 查询）。但原因并不明显，因为使用 Next.js 您应该能够从您的组件中调用 Mongo。

原因

Next.js 抛出此错误，因为您正在导入您的 mongo 代码而不使用它。

听起来很奇怪，但这是真的。

如何避免

为避免此错误，只需删除组件中的任何服务器端代码 import如果您不在 getServerSideProps 中使用它。

听起来更奇怪，但这是真的。

好的和坏的例子

这很好用：

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

虽然这会抛出错误：

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

【讨论】：

我已经被这个咬过几次了。错误消息根本没有帮助。
不是 Mongo，但我遇到了类似的问题，也得到了类似的解决。
我的问题是我将getServerSideProps() 称为getServerSiderProps() ... 有几天哈哈

【解决方案2】：

将您的服务器端编码模块（例如：模型、数据库连接制造商）保留在 Page 目录之外。

供参考：https://nextjs.org/docs/messages/prerender-error

【讨论】：

我的 mongodb 类位于 pages 文件夹旁边的 utils 文件夹中，但仍然出现此错误。删除 index.js 中 mongodb 的导入有帮助

【解决方案3】：

如果您在使用 Next-js 身份验证时遇到此错误，请确保您的“lib”文件夹位于根目录中。

Here's the structure

【讨论】：

【解决方案4】：

我的问题是我在 initialprops 中使用了一个函数，该函数是通过 module.exports 而不是 export default 导出的

【讨论】：