尝试将 mongoose 连接到我的 mongodb 并出现浏览器内错误

Question

代码在我的编辑器中编译得很好，但只出现在我的浏览器应用程序中：

import React, { useState } from 'react';
import mongoose from 'mongoose';

mongoose.connect(process.env.DATABASE_URL, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to the database');
});

const Index = () => {
    const [postText, setPostText] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        // add code here to handle form submission and create a post
        setPostText('');
    }

    return (
        <div>
            <h1>Welcome to My Social Media App</h1>
            <form onSubmit={handleSubmit}>
                <textarea value={postText} onChange={(e) => setPostText(e.target.value)} placeholder="What's on your mind?"/>
                <button type="submit">Post</button>
            </form>
        </div>
    )
}

export default Index;

未处理的运行时错误 TypeError: mongoose__WEBPACK_IMPORTED_MODULE_2___default(...).connect is not a function

我只是想让它连接到我的 mongodb，老实说，我尝试了 chatgpt 向我建议的一些事情，因为我正在学习使用它进行编码，所以我只是要求它修复它，但它不能。 我不确定我还应该说些什么。

一开始我遇到了这个错误：

类型错误：mongoose.connect 不是 function

所以我试过：

此错误通常是由于您忘记在文件中导入 mongoose 模块而导致的。 请确保您的文件顶部有以下行：

javascript 复制代码

const mongoose = require("mongoose");

此外，通过运行 npm install mongoose，确保您已在项目中安装了 mongoose package。

和这个：

发生错误是因为您试图在 mongoose 模块上调用连接 function，但 mongoose 尚未正确导入。

尝试更改此行：

javascript 复制代码

const mongoose = require('mongoose');

对此：

python 复制代码

import mongoose from 'mongoose';

这应该可以解决错误并允许您使用 Mongoose 连接到 MongoDB 数据库。

然后这个：

问题是 mongoose 模块是使用 CommonJS 模块常用的 require 语句导入的。 但是，由于您使用的是使用 ES6 模块构建的 Next.js 应用程序，因此您需要改用 import 语句：

javascript 复制代码

import mongoose from 'mongoose';

mongoose.connect(process.env.DATABASE_URL, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to the database');
});

Answer 1

因此，根据 Matt 的评论，我将他的回复提供给 chatGPT，这是它吐出的代码，它解决了这个问题：

以下是如何使用 getServerSideProps 修复代码中的错误：

javascript 复制代码

import React, { useState } from 'react';
import mongoose from 'mongoose';

const Index = () => {
    const [postText, setPostText] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        // add code here to handle form submission and create a post
        setPostText('');
    }

    return (
        <div>
            <h1>Welcome to My Social Media App</h1>
            <form onSubmit={handleSubmit}>
                <textarea value={postText} onChange={(e) => setPostText(e.target.value)} placeholder="What's on your mind?"/>
                <button type="submit">Post</button>
            </form>
        </div>
    )
}

export async function getServerSideProps(context) {
    await mongoose.connect(process.env.DATABASE_URL, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
    });

    const db = mongoose.connection;
    db.on('error', console.error.bind(console, 'connection error:'));
    db.once('open', () => {
        console.log('Connected to the database');
    });

    return {
        props: {},
    };
}

export default Index;

这样mongoose代码只会在服务端运行，不会干扰客户端渲染。