找不到模块：无法解析 'fs' - 调用函数

Question

我有一个 NextJS 项目，其中一个组件使用 getStaticProps 和 getStaticPaths 来获取文件列表：

getAllBlogPosts 函数在另一个文件中（见下文）

import { GetStaticPaths, GetStaticProps } from "next";
import { useRouter } from "next/router";
import BlogSummaryPage from "../index";
import { getAllBlogPosts } from "../_functions";
import { BLOGPOSTS_PER_PAGE } from "../../../config/blogposts";

const BlogPage = ({ blogposts }: any) => {
  const router = useRouter();
  const { num = 1 } = router.query;
  return <BlogSummaryPage blogposts={blogposts} page={Number(num)} />;
};

const getStaticPaths: GetStaticPaths = async () => {
  const blogposts = getAllBlogPosts();
  let pageCount = Math.ceil(blogposts.length / BLOGPOSTS_PER_PAGE);
  const paths = [];
  while (pageCount) {
    paths.push({ params: { num: `${pageCount}` } });
    pageCount -= 1;
  }

  return {
    paths,
    fallback: false,
  };
};

const getStaticProps: GetStaticProps = async () => {
  const blogposts = getAllBlogPosts();
  return {
    props: {
      blogposts,
    },
  };
};

export { getStaticProps, getStaticPaths };

export default BlogPage;

在另一个文件中：

import fs from "fs";
import matter from "gray-matter";
import { IBlogpost } from "./_types";

const getAllBlogPosts = (): Array<IBlogpost> => {
  const blogpostFilenames = fs.readdirSync("blogposts");
  const blogposts = blogpostFilenames
    .reverse()
    .filter((filename) => filename !== `template.md`)
    .map((fileName) => {
      const readBlogFile = fs.readFileSync(`blogposts/${fileName}`, "utf-8");
      const {
        data: { date, image, imgAlt, imgHeight, imgWidth, slug, summary, title },
        content,
      } = matter(readBlogFile);
      return {
        content,
        date,
        image,
        imgAlt,
        imgHeight,
        imgWidth,
        slug,
        summary,
        title,
      };
    });

  return blogposts;
};

export { getAllBlogPosts };

在执行 yarn build 时，我收到以下错误消息：

yarn run v1.22.18
$ next build
info  - Checking validity of types  
info  - Creating an optimized production build  
Failed to compile.

./pages/blog/_functions.ts
Module not found: Can't resolve 'fs' in '/home/george/code/myblog/pages/blog'

我只是从这两个函数中调用 getAllBlogPosts 函数。使用 yarn dev 一切都按预期工作。我想把它放在一个单独的文件中，因为以后其他页面会用到它。

关于如何解决这个问题的任何提示？泰！

Answer 1

在 'pages' 目录中拥有一个具有共享功能的模块似乎不是一个好主意。 NextJS 将假定 'pages' 中的每个文件都应该像页面一样进行编译。

我刚刚创建了一个带有共享功能的小型服务器，用于使用 fs 读取文本文件，并从 getStaticProps/getStaticPaths/getServerSideProps 调用它，没有任何问题。我根本无法得到错误。然后我简单地将共享模块（我将其放在页面目录上方中）复制到 'pages' 并得到了你的错误。

找不到模块：无法解析 'fs' - 调用函数

Module not found: Can't resolve 'fs' - Calling function

reactjs

next.js