无法将Mongoose 7与NextJS 13一起使用

camsedfj 于 2023-08-06 发布在 Go

关注(0)|答案(1)|浏览(112)

我正在使用Nextjs 13.4.7和mongoose 7，并对我的next.config.js进行了必要的配置，如mongoose所给予：

/** @type {import('next').NextConfig} */

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    config.experiments = { ...config.experiments, topLevelAwait: true };
    return config
  },
  experimental: {
    serverComponentsExternalPackages: ["mongoose"],
    appDir: true
  },
}

字符串
但是，它仍然给出如下批次模块导入错误：

Module not found: Can't resolve 'kerberos' in '/home/krush/portfolioblog/blog/node_modules/mongodb/lib'

Import trace for requested module:
./node_modules/mongodb/lib/deps.js
./node_modules/mongodb/lib/index.js
./node_modules/mongoose/lib/index.js
./node_modules/mongoose/index.js
./lib/dbConnect.js
./app/posts/[postId]/page.js

./node_modules/mongodb/lib/deps.js
Module not found: Can't resolve '@mongodb-js/zstd' in '/home/krush/portfolioblog/blog/node_modules/mongodb/lib'

Import trace for requested module:
./node_modules/mongodb/lib/deps.js
./node_modules/mongodb/lib/index.js
./node_modules/mongoose/lib/index.js
./node_modules/mongoose/index.js
./lib/dbConnect.js
./app/posts/[postId]/page.js

./node_modules/mongodb/lib/deps.js

Module not found: Can't resolve 'aws4' in '/home/krush/portfolioblog/blog/node_modules/mongodb/lib'

Import trace for requested module:
./node_modules/mongodb/lib/deps.js
./node_modules/mongodb/lib/index.js
./node_modules/mongoose/lib/index.js
./node_modules/mongoose/index.js
./lib/dbConnect.js
./app/posts/[postId]/page.js

型
我该如何解决此问题？有人能提供正确的配置来解决这个错误吗？
PS.这个错误是因为NextJS规则，我们不能使用客户端组件（'使用客户端'指令）与服务器组件。

mongoose

来源：https://stackoverflow.com/questions/76625458/unable-to-use-mongoose-7-with-nextjs-13

1条答案

按热度按时间

2vuwiymt1#

事实证明，你不能在客户端组件中使用mongoose（具有“使用客户端”）数据获取，因为它涉及到mongoose需要mongodb连接URI env变量，而该变量无法在客户端组件中访问。我是这样解决的：

方法错误

- app/
  - posts/
     - [postId]
        - page.js

字符串
我的page.js组件的代码使用mongoose查询，这是一个客户端组件使用React状态等。

'use client';
import Posts from '@/models/post';
import dbConnect from '@/lib/dbConnect';

async function fetchPost(postId) {
   // MONGODB_URI is being accessed by dbConnect() which is not possible
   await dbConnect();
     const postData = await Posts.findById(postId);

     return postData;
}

export default async function Component({params: {postId}}) {
   const postData = await fetchPost();

   return <div>{postData.title}</div>
}

型

固定方法

新目录结构。

page.js成为一个服务器组件，数据作为props传递给子组件
PostComponent处理客户端功能，现在可以访问状态等Reach功能。

- app/
  - posts/
     - [postId]
        - page.js
        - PostComponent.js

型
使用mongoose查询的page.js组件结构

import Posts from '@/models/post';
import dbConnect from '@/lib/dbConnect';
import PostComponent from './PostComponent';

async function fetchPost(postId) {
   // MONGODB_URI is being accessed by dbConnect() which is not possible
   await dbConnect();
     const postData = await Posts.findById(postId);

     return postData;
}

export default async function Component({params: {postId}}) {
   const postData = await fetchPost();

   return <div><PostComponent postData={postData} /></div>
}

型
PS.我也有一个问题，我无法使用没有NEXT_APP_前缀的env变量。这个答案也解决了这些问题。

赞(0）回复(0）举报 2023-08-06

我来回答

无法将Mongoose 7与NextJS 13一起使用

1条答案

方法错误

固定方法

相关问题

热门标签

最新问答