Module not found: Can't resolve 'fs' in '/vercel/2d531da8/node_modules/mysql/lib/protocol/sequences' when deploying to Vercel

user_3088301 0
Viewed 2876

I'm getting the following error when deploying to Vercel:

Module not found: Can't resolve 'fs' in '/vercel/2d531da8/node_modules/mysql/lib/protocol/sequences'

I don't use the dependency fs, my package.json file looks like:

{
"name": "single",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"mysql": "^2.18.1",
"next": "^9.4.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"serverless-mysql": "^1.5.4",
"sql-template-strings": "^2.2.2"
}
}

I'm pretty new to NextJS, so I'm not really sure what's going on. Any ideas?

Edit:

For context, I'm getting data from mySQL in the app, not sure if that has anything to do with the error

export async function getStaticProps() {
const db = require('./lib/db')
const escape = require('sql-template-strings')
const articles = await db.query(escape`
SELECT *
  FROM articles
  ORDER BY pid
`)
 const var1 = JSON.parse(JSON.stringify({ articles }))



return {
    props: {
        var1,
    },
}
}
next.js
2 Answers

Solved it by creating a next.config.js file and adding the following to it:

module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config

    // Example using webpack option
    //config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
    config.node = {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
    return config
},
webpackDevMiddleware: config => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config
},
}
user_30883010

I had a similar problem whilst following the next.js tutorial. To resolve this I had to also create a next.config.js file as the above answer. However I have only added the following next configurations

module.exports = {
    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}

Once I had added the above next.config.js file with the contents above I was able to successfully build the solution.

source: https://newspatrak.com/javascript/cant-build-react-next-project-found-page-without-a-react-component-as-default-export-context-api-file/

Next.js tutorial link: https://nextjs.org/learn/basics/deploying-nextjs-app/deploy

user_34601500
Related