'NextJS with Serverless Mysql ServersideProps - fs error

I'm trying to build an app in nextjs and I've stumbled upon some issues. I'd like to do a query call inside my getServerSideProps() but I get the error:

error - ./node_modules/mysql/lib/protocol/sequences/Query.js:2:0
Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/mysql/lib/Connection.js
./node_modules/mysql/index.js
./node_modules/serverless-mysql/index.js
./lib/db.js
./lib/components/admin/_bans.js
./pages/admin/index.js

This is easily solved if I put this code inside an api endpoint but I'd like not do so. Sometimes it's just better to do everything inside the component. But why would I get this error. I know it's because something regarding server but then again, getServersideProps(), does't that run on the server? Am I missing something obvious here?

Below is my getServerSideProps()

export async function getServerSideProps(context) {

    const results = await sql_query(`
        SELECT * from table 
    `);
    
    let result = JSON.parse(JSON.stringify(results))[0];
    
    let posts;

    return {
        props: {}, // will be passed to the page component as props
    }
}

As said, I am using the Serverless-mysql package. Here is my db.js which handles my query calls.

import mysql from 'serverless-mysql'

export const db = mysql({
  config: {
    host: process.env.MYSQLHOST,
    database: process.env.DATABASE,
    user: process.env.USERNAME,
    password: process.env.PASSWORD,
  },
})

export async function sql_query(query_string,values = []) {
  try {
    const results = await db.query(query_string, values)
    await db.end()
    return results
  } catch (e) {
    throw Error(e.message)
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source