即使我仅在“getStaticProps()”内使用 fs 代码,也找不到模块“fs/promises” - next js

Dik*_*mar 3 javascript development-environment node.js server-side-rendering next.js

所以,我使用最新版本的 next js ^11.1.2。根据文档,在 getStaticProps() 函数中使用服务器端(node 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;
Run Code Online (Sandbox Code Playgroud)

终端中显示的错误图片

而且我在开发环境中。

Sul*_*lik 6

使用

import { promises as fs } from 'fs';
Run Code Online (Sandbox Code Playgroud)

代替

import fs from "fs/promises";
Run Code Online (Sandbox Code Playgroud)

并更改fs.readFileSyncfs.readFile.