Next.js MySQL Connection Issue

Question

I'm encountering an issue with my Next.js application when trying to establish a connection to a MySQL database using the mysql2 library. I've provided a simplified version of my code below: javascriptCopy code

import React, { useEffect, useState } from 'react';
import { createPool } from 'mysql2/promise';

export default function DbTest() {
    const [connectionStatus, setConnectionStatus] = useState('');

    useEffect(() => {
        testMysqlConnection();
    }, []);

    async function testMysqlConnection() {
        try {
            console.log('Connecting to MySQL database...');
            const pool = createPool({
                host: 'localhost',
                user: 'aiubot_admin_1',
                password: 'WIW22ICACB,WIW22ICACB',
                database: 'aiubot',
                connectionLimit: 10, // Set the maximum number of connections in the pool
            });

            console.log('Connection to MySQL database successful');

            console.log('Attempting to get connection from pool...');
            const connection = await pool.getConnection();
            console.log('Connection retrieved from pool:', connection);

            console.log('Closing connection...');
            connection.release();
            console.log('Connection closed successfully.');

            // End the pool after testing
            pool.end();

            setConnectionStatus('Connection Success');
        } catch (error) {
            console.error('Error connecting to MySQL database:', error.message);
            setConnectionStatus(`Error in the connection: ${error.message}`);
        }
    }

    return (
        <div>
            <h1>Database Connection Test</h1>
            <h2>Hi world</h2>
            <p>{connectionStatus}</p>
        </div>
    );
}

The error message I'm receiving is:

"Error connecting to MySQL database: Net.connect is not a function."

This occurs when attempting to retrieve a connection from the pool using getConnection(). . I've checked my imports, verified the availability of the method, and ensured compatibility with Node.js. However, I'm still unable to resolve the issue. Any insights or suggestions on how to troubleshoot and fix this problem would be greatly appreciated. Thank you in advance for your help!

I have tried re-installing mysql2, I tried using mysql instead, I also tried uninstalling node_modules, I updated my version of mysql and node.js. mysql2 version 3.9.3, node.js version 21.3.0

At this point I don't know what do do.

console log I get:

[HMR] connected
db_test.js:14 Connecting to MySQL database...
db_test.js:23 Connection to MySQL database successful
db_test.js:25 Attempting to get connection from pool...
db_test.js:14 Connecting to MySQL database...
db_test.js:23 Connection to MySQL database successful
db_test.js:25 Attempting to get connection from pool...
client.js:25 Error connecting to MySQL database: Net.connect is not a function
console.error @ client.js:25
window.console.error @ setup-hydration-warning.js:18
testMysqlConnection @ db_test.js:38
await in testMysqlConnection (async)
eval @ db_test.js:9
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
eval @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
client.js:25 Error connecting to MySQL database: Net.connect is not a function
console.error @ client.js:25
window.console.error @ setup-hydration-warning.js:18
testMysqlConnection @ db_test.js:38
await in testMysqlConnection (async)
eval @ db_test.js:9
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
eval @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
db_test:1 Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received