Mysql 在 Next.js 项目中不使用 tls 和 net

Question

我的数据库/index.js

const mysql = require('mysql2')

const pool = mysql.createPool({
    host: process.env.DB_HOST,
    user: process.env.DB_USERNAME,
    password: process.env.DB_PASSWORD,
    database: process.env.DB_DBNAME,
    waitForConnections: true,
    connectionLimit: 10,
    queueLimit: 0
});

pool.getConnection((err, conn) => {
    if (err) console.log(err)
    console.log("Connected successfully")
})

module.exports = pool.promise()

我的示例.jsx

import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import ContactForm from './contact-form';
import pool from '../../database/index'

const ContactsSection = () => {
    const [row, setRow] = useState({});

    useEffect(() => {
        const fetchData = async () => {
            try {
                const [rows, fields] = await pool.query("SELECT * FROM company");
                setRow(rows[0]); // Sadece bir satır alıyorsanız
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchData();
    }, []);
    return (
        <section className="contact__area pt-80 pb-80">
            <div className="container">
                <div className="row wow fadeInUp" data-wow-delay=".3s">
                    <div className="col-lg-6">
                        <div className="contact__info-wrapper mb-30">
                            <div className="section__title-one mb-20">
                                <span>{"// Bize Ulaşın"}</span>
                                <h2>Temasa Geç</h2>
                            </div>
                            <div className="contact__info-item">
                                <div className="contact__info-icon">
                                    <i className="fa-solid fa-comment"></i>
                                </div>
                                <div className="contact__info-content">
                                    <span>Dilediğiniz Zaman Arayın</span>
                                    <h5><a href="tel:[phone]">{row.phone}</a></h5>
                                </div>
                            </div>
                            <div className="contact__info-item">
                                <div className="contact__info-icon">
                                    <i className="fa-solid fa-envelope-open"></i>
                                </div>
                                <div className="contact__info-content">
                                    <span>Email Gönder</span>
                                    <h5><a href="mailto:[email protected]">[email protected]</a></h5>
                                </div>
                            </div>
                            <div className="contact__info-item">
                                <div className="contact__info-icon">
                                    <i className="fa-solid fa-location-arrow"></i>
                                </div>
                                <div className="contact__info-content">
                                    <span>Bizi Ziyaret Et</span>
                                    <h5><Link href="https://www.google.com/maps/@23.8272409,90.3665795,11z?hl=en" ><div >Demirtaş Cumhuriyet, 204. Sk. D:No.6, 16245 Osmangazi/Bursa</div></Link></h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6">
                        <ContactForm />
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ContactsSection;

错误信息

./node_modules/mysql2/lib/connection.js:18:0
Module not found: Can't resolve 'net' and 'tls'

Import trace for requested module:
./node_modules/mysql2/index.js
./database/index.js
./components/contact/contacts-section.jsx
./components/contact/index.jsx
./pages/iletisim.jsx

https://nextjs.org/docs/messages/module-not-found

我的package.json

{
  "name": "gardomia",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "@reduxjs/toolkit": "^1.8.3",
    "bootstrap": "^5.1.3",
    "formik": "^2.2.9",
    "mysql2": "^3.7.1",
    "next": "^12.2.2",
    "now": "^21.0.1",
    "react": "18.2.0",
    "react-countup": "^6.3.0",
    "react-dom": "18.2.0",
    "react-intersection-observer": "^9.4.0",
    "react-paginate": "^8.1.3",
    "react-redux": "^8.0.2",
    "react-slick": "^0.29.0",
    "react-toastify": "^9.0.7",
    "redux-persist": "^6.0.0",
    "swiper": "^8.3.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@vercel/next": "^4.1.0",
    "eslint": "8.20.0",
    "eslint-config-next": "12.2.2",
    "sass": "^1.70.0"
  }
}

我使用的是Node.js，我安装了mysql2包，部署vercel时没有问题。但是当我调用 contact-section.jsx 页面时，我收到这些错误。我删除了节点模块并重新安装了它们。我删除了mysql2并安装了mysql。我仍然遇到同样的错误。它说找不到 net 和 tls 模块。

Answer 1

这些是您可以尝试的选项

1. 要解决该错误，请将 package.json 文件中的 browser.tls 属性设置为 false。

在你的 package.json 示例中

{
  "dependencies": {},
  "devDependencies": {},

  // add this to package.json 
  "browser": {
    "tls": false,
    "net": false,
  }
}

2. 如果错误仍然存在，请尝试强制安装网络模块。

npm 安装网

3. 如果仍然继续，请尝试修改 webconfig

   module.exports = 函数 (webpackEnv) { // ... 返回 { // ... 解决： { // ... 倒退： { // 添加这个 “tls”：假， “网”：假， } } } }

参考：https://bobbyhadz.com/blog/module-not-found-error-cant-resolve-tls