next.js - 找不到模块 : Can't resolve 'fs' in '/vercel/2d531da8/node_modules/mysql/lib/protocol/sequences' when deploying to Vercel

Question

部署到 Vercel 时出现以下错误:

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

我不使用依赖项 fs，我的 package.json 文件如下所示:

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

我对 NextJS 还很陌生，所以我不太确定发生了什么。有什么想法吗？

---

编辑:

就上下文而言，我正在应用程序中从 mySQL 获取数据，不确定这是否与错误有关

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,
    },
}
}

Answer 1

通过创建 next.config.js 文件并向其中添加以下内容来解决该问题:

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
},
}