Next.js引入@techstark/opencv-js报Can't resolve 'fs'错误解决方案咨询

问题解答 #

为什么相同代码在React项目正常运行，Next.js项目报错 #

Create React App默认是纯客户端渲染模式，构建阶段会自动屏蔽Node.js原生模块的解析校验，所以不会触发fs模块缺失的报错；而Next.js默认支持服务端渲染/静态生成，代码会先在Node.js环境完成打包校验，且Next.js不识别根目录下独立的webpack.config.js配置，你之前加的fallback规则没有生效，所以触发了报错。

浏览器客户端加载opencv.js跳过fs模块解析的方法 #

以下两种方案任选一种即可：

方案1：修改Next.js配置添加webpack fallback规则

在项目根目录找到next.config.js文件，替换为如下配置，修改完重启开发服务即可生效：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    // 给webpack添加Node原生模块忽略规则
    config.resolve.fallback = {
      fs: false,
      path: false,
      crypto: false,
      ...config.resolve.fallback
    }
    return config
  }
}

module.exports = nextConfig

方案2：仅在客户端动态导入opencv.js（更推荐）

opencv.js是纯客户端运行的库，不需要参与服务端渲染，你可以用Next.js的客户端动态导入能力，完全跳过服务端打包校验，无需修改webpack配置：

1. 删掉原有静态导入语句 import cv from "@techstark/opencv-js"
2. 在Home组件内添加cv加载逻辑：

export default function Home() {
  const canvas1 = useRef()
  const img1 = useRef()
  // 新增cv状态存储和客户端加载逻辑
  const [cv, setCv] = useState(null)
  useEffect(() => {
    import("@techstark/opencv-js").then(mod => setCv(mod.default))
  }, [])

3. 修复原有testOpenCv函数的两个问题：先判断cv是否加载完成，修正颜色空间转换的常量前缀：

async function testOpenCv() {
  // 库未加载完成时直接返回
  if (!cv) return
  var img = img1.current
  var mat = cv.imread(img)
  // 原代码这里openCv是错误变量名，改为cv
  await cv.cvtColor(mat, mat, cv.COLOR_RGBA2GRAY)
  await cv.bitwise_not(mat, mat)
  await cv.imshow(canvas1.current, mat)
}

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