Mysql doesn't use tls and net in Next.js project

Question

My database/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()

My Example .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:05325470421">{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;

Error Message

./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

my 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"
  }
}

I am using Node.js, I installed the mysql2 package, there is no problem when I deploy vercel. but when I call this contacts-section.jsx page, I get these errors. I deleted node modules and reinstalled them. I deleted mysql2 and installed mysql. I'm still getting the same errors. It says it couldn't find the net and tls module.

Answer 1

These are the options you can try

1. To solve the error, set the browser.tls property to false in your package.json file.

in your package.json example

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

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

2. If the error persists, try to forcefully install the net module.

npm install net

3. if it still continues then try modifying the webconfig

   module.exports = function (webpackEnv) { // ... return { // ... resolve: { // ... fallback: { // add this "tls": false, "net": false, } } } }

Ref : https://bobbyhadz.com/blog/module-not-found-error-cant-resolve-tls