Next.js ^11.1.2在getStaticProps内使用fs/promises提示找不到模块

• Node.js版本兼容问题：fs/promises 直接作为顶层模块导入的特性从 Node.js v14.14.0 才正式支持，若本地开发环境使用的 Node.js 版本低于该版本，就会抛出找不到模块的错误。
• API调用错误：你导入的是 Promise 化的 fs/promises 模块，仅提供异步的文件操作方法，不存在同步的 readFileSync 方法，就算模块导入成功，后续运行也会抛出方法不存在的错误，且同步方法不需要搭配 await 使用，写法本身不符合规范。
• 低版本Next.js打包逻辑问题：Next.js 11的部分小版本开发环境默认没有完善服务端模块的自动排除逻辑，会误将服务端专属模块当成客户端依赖尝试打包。

方法一：调整代码兼容低版本环境 #

修改fs导入写法和API调用逻辑，兼容所有支持Next.js 11的Node.js版本：

import fs from "fs";
import path from "path";

function HomePage(props) {
  return (
    <ul>
      {props.products.map((el) => (
        <li key={el.id}>{el.title}</li>
      ))}
    </ul>
  );
}

export async function getStaticProps() {
  try {
    // 调用fs.promises下的异步readFile方法，添加utf8编码直接返回字符串
    let data = await fs.promises.readFile(
      path.join(process.cwd(), "data", "dummy-backend.json"),
      "utf8"
    );
    data = JSON.parse(data);
    return {
      props: {
        products: data.products,
      },
    };
  } catch (err) {
    console.log(err);
    return {
      props: {
        products: [],
        error: "Error in fetching data",
      },
    };
  }
}

export default HomePage;

方法二：升级Node.js版本 #

如果不想修改导入写法，将本地开发环境的Node.js版本升级到v14.14.0及以上即可直接支持import fs from "fs/promises"的导入方式，注意仍需把readFileSync替换为readFile方法。

方法三（可选）：添加webpack配置 #

如果修改代码后仍然出现报错，可在项目根目录的next.config.js文件中添加如下配置，明确告知webpack客户端打包时忽略服务端专属模块：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
        path: false
      }
    }
    return config
  }
}

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