Cypress mysql connector throws an error Error: Webpack Compilation Error - mysql

Question

I am new to cypress. My cypress test suite are runing good before configure a mysql connector to connect to mysql database. It throw below Webpack Compilation Error error when add mysql connector code in plugins >> Index.js. following BDD apporche so feature file is used.
Error encountered:
Error: Webpack Compilation Error
./cypress/integration/Login.feature 1:15
Module parse failed: Unexpected token (1:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> Feature: Login test
Code in plugins >> index.js
const mysql = require('mysql2')
function queryTestDb(query, config) {
// creates a new mysql connection using credentials from cypress.json env's
const connection = mysql.createConnection(Cypress.env('passwrd'))
// start connection to db
connection.connect()
// exec query + disconnect to db as a Promise
return new Promise((resolve, reject) => {
connection.query(query, (error, results) => {
if (error) reject(error)
else {
connection.end()
// console.log(results)
return resolve(results)
}
})
})
};
module.exports = (on, config) => {
// Usage: cy.task('queryDb', query)
on('task', {
queryDb: query => {
return queryTestDb(query, config)
},
})
};
Calling function in step definition
cy.task(
"queryDb",
`select * from city LIMIT 5`
).then(count => {
expect(count).to.have.lengthOf(1);
});
Cypress.json
"env1": {
"db":
{"host": "xxxx.test.mysql",
"user": "xxxxxxx",
"passwrd": "xxxxxxx",
"database": "main" ,
"connectionLimit":10
}
}
tsconfig.js
"compilerOptions": {
"target": "es5",
"outDir": "./built",
"lib": ["es5", "dom"],
"allowSyntheticDefaultImports": false,
"allowJs": true,
"types": ["cypress", "node", "cypress-xpath"]
}
tried lots of ways likes
by refresh installation of node_modules
reinstall mysql2 and mysql package
reinstalling #cypress/webpack-preprocessor
but nothing works.