即使我仅在“getStaticProps()”中使用 fs 代码，也找不到模块“fs/promises” - 下一个 js

Question

所以，我使用最新版本的next js ^11.1.2。 根据文档，在 getStaticProps() 函数中使用服务器端（节点 js）代码很好，因为它从客户端构建中删除了“fs”导入。

但就我而言，它不起作用。

以下代码是我所做的...

    import fs from "fs/promises";
    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 {
        let data = await fs.readFileSync(
          path.join(process.cwd(), "data", "dummy-backend.json")
        );
        console.log(data);
        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;

终端显示的错误图片

我在开发环境中。

Answer 1

我最喜欢的解决方案：使用

import { promises as fs } from 'fs';

代替

import fs from "fs/promises";

并将 fs.readFileSync 更改为 fs.readFile。