Ubuntu环境构建Next.js项目出现webpack的node:fs相关编译报错

该报错是Webpack 5默认不支持识别Node.js的node:协议前缀的内置模块引入触发的，本质是你的代码/依赖的第三方包在Next.js客户端侧打包流程中引入了仅可在Node.js服务端环境使用的fs内置模块，浏览器环境本身不支持这类模块。

• 先排查业务代码的非法引入
  全局搜索项目内是否存在import fs from 'fs'、import 'node:fs'、const fs = require('fs')这类写法，Node.js内置模块仅可在getServerSideProps、getStaticProps、Next.js API路由这类服务端运行的代码中使用，不可写在普通React组件、客户端工具函数中，误写的直接删除即可。
  如果自己的代码没有这类引入，就是依赖的第三方包不支持前端环境，排查近期新增的依赖，替换为适配浏览器的同类包即可。

• 适配Webpack配置兼容node:协议
  如果确认该依赖仅在服务端使用，只是打包时被客户端流程误识别，可以修改项目根目录的next.config.js配置，手动兼容node:协议解析：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 客户端打包时忽略node内置模块
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        'node:fs': false,
        // 若后续有其他node内置模块报同类错误，可在此处追加，比如path、os等
        // path: false,
        // 'node:path': false
      }
    }
    // 映射node:协议的模块别名
    config.resolve.alias = {
      ...config.resolve.alias,
      'node:fs': 'fs',
      // 其他node:模块同理补全
    }
    return config
  },
}

module.exports = nextConfig

• 升级Next.js版本
  如果你的Next.js版本低于12.2，可直接升级到12.2及以上的稳定版，高版本已经默认支持Webpack对node:协议的解析，升级命令：
  yarn add next@latest

• 清理缓存重试
  如果以上操作都无效，可清空依赖和构建缓存后重新构建：

rm -rf node_modules .next yarn.lock package-lock.json
yarn install
yarn build

内容的提问来源于stack exchange，提问作者user17592524