NodeJS 未找到模块：无法解析'fs'

qv7cva1a 于 2023-05-17 发布在 Node.js

关注(0)|答案(2)|浏览(219)

我试图使下一个js 13 mdx博客网站与最新的应用程序路由器我得到这个错误=>模块未找到：无法解析'fs'在下一个js 12和pages目录中它工作，但在最新的应用程序路由器中它不工作
这是我的代码

"use client"

import Head from 'next/head';
import BlogSidebar from '../../components/blog/sidebar';
import Pagination from '../../components/blog/pagination';
import fs from 'fs';
import matter from 'gray-matter';
import { join } from 'path';
import { useRouter } from 'next/router'

export async function getStaticProps() {
  const blogsDirectory = join(process.cwd(), '_blog');
  const files = fs.readdirSync(blogsDirectory);

  let posts = files.map((fileName) => {
    const slug = fileName.replace(/\.md$/, '');
    const fullPath = join(blogsDirectory, `${slug}.md`);
    const readFile = fs.readFileSync(fullPath, 'utf8');
    const { data: frontmatter } = matter(readFile);
    return {
      slug,
      frontmatter,
      
    };
  });

  posts = posts.sort((job1, job2) => (job1.frontmatter.date > job2.frontmatter.date ? -1 : 1));

  return {
    props: {
      posts,
    },
    
  };
}

const page = ({ posts }) => {

  console.log(posts, "posts");

node.js

来源：https://stackoverflow.com/questions/76258841/module-not-found-cant-resolve-fs

2条答案

按热度按时间

dy1byipe1#

在你发布的代码片段中有几个问题。

getStaticProps在Next.js 13应用路由器中不受支持。如果您尝试在app目录下的页面中使用它，您将获得以下错误：
app/中不支持“getStaticProps”。阅读更多：https://nextjs.org/docs/app/building-your-application/data-fetching
你应该阅读上面提到的关于Next.js 13应用路由器中数据获取的文档。
1.您将页声明为客户端组件，但希望它访问服务器端文件系统。这样下去是行不通的。
您需要重写代码，使其与app目录兼容。下面是你如何解决这个问题：

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

async function getPosts() {
  const files = fs.readdirSync(path.resolve("_blog"));

  // read posts

  return posts;
}

export default async function Home() {
  const posts = await getPosts();

  console.log(posts);

  // render posts
}

下面的迁移指南也会有所帮助。
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration

赞(0）回复(0）举报 2023-05-17

t5fffqht2#

fs模块在客户端不可用。您可以使用next/dynamic组件在服务器端加载文件内容，然后在客户端呈现它们。
下面是更新后的代码：

import Head from 'next/head';
import BlogSidebar from '../../components/blog/sidebar';
import Pagination from '../../components/blog/pagination';
import matter from 'gray-matter';
import { join } from 'path';
import { useRouter } from 'next/router';

export async function getStaticProps() {
  const blogsDirectory = join(process.cwd(), '_blog');
  const files = fs.readdirSync(blogsDirectory);

  let posts = files.map((fileName) => {
    const slug = fileName.replace(/\.md$/, '');
    const fullPath = join(blogsDirectory, `${slug}.md`);
    const readFile = fs.readFileSync(fullPath, 'utf8');
    const { data: frontmatter } = matter(readFile);
    return {
      slug,
      frontmatter,
    };
  });

  posts = posts.sort((job1, job2) => (job1.frontmatter.date > job2.frontmatter.date ? -1 : 1));

  return {
    props: {
      posts,
    },
  };
}

const page = ({ posts }) => {
  const dynamicPost = useRouter().query.post;
  const post = posts.find(post => post.slug === dynamicPost);

  return (
    <div>
      <Head>
        <title>My Blog</title>
      </Head>
      <BlogSidebar />
      <main>
        {post && (
          <article>
            <h1>{post.frontmatter.title}</h1>
            <p>{post.frontmatter.content}</p>
          </article>
        )}
      </main>
      <Pagination />
    </div>
  );
};

export default page;

这段代码将首先在服务器端加载文章列表。然后，它将呈现查询字符串中指定的帖子。如果查询字符串中没有指定post，它将呈现列表中的第一个post。

赞(0）回复(0）举报 2023-05-17

我来回答

NodeJS 未找到模块：无法解析'fs'

2条答案

相关问题

热门标签

最新问答