最新Next.js与Node版本下npm gray-matter无法正常使用求助

问题描述 #

使用最新版Next.js搭配gray-matter@4.0.3解析Markdown FrontMatter时，官方示例代码也无法正常工作，返回的data为空对象，content保留完整原始文本。

相关环境依赖 #

"dependencies": {
    "clsx": "1.2.1",
    "gray-matter": "^4.0.3",
    "next": "latest",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "remark": "^14.0.2",
    "remark-html": "^15.0.2",
    "styled-components": "6.0.0-beta.2",
    "styled-jsx": "5.1.0",
    "use-count-up": "3.0.1"
  },
  "devDependencies": {
    "@types/node": "18.0.3",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "^10.4.7",
    "eslint": "8.19.0",
    "eslint-config-next": "latest",
    "postcss": "^8.4.14",
    "prettier": "^2.7.1",
    "prettier-plugin-tailwindcss": "^0.1.12",
    "tailwindcss": "^3.1.6",
    "typescript": "4.7.4"
  }

问题代码片段 #

import fs from 'fs'
import path from 'path'
import { remark } from 'remark'
import matter from 'gray-matter';
import remarkHtml from 'remark-html'

// const matter = require('gray-matter');

export function getAllPosts() {
  const postsDirectory = path.join(process.cwd(), '/blogs/HFTs')
  const filenames = fs.readdirSync(postsDirectory)

  return filenames.map(filename => {
    const file = fs.readFileSync(path.join(process.cwd(), '/blogs/HFTs', filename), 'utf8')
   
    // get frontmatter
    const { data, content } = matter(file)
    console.log(matter('---\ntitle: Front Matter\n---\nThis is content.'));

    // get slug from filename
    const slug = filename.replace(/\.mdx$/, '')

    // return combined frontmatter and slug; build permalink
    return {
      ...data,
      permalink: `/HFTs/${slug}`,
      slug,
    }
  })
}

问题现象 #

执行官方示例代码后，输出结果：

{
  content: '---\ntitle: Front Matter\n---\nThis is content.',
  data: {},
  isEmpty: false,
  excerpt: '',
  orig: <Buffer 2d 2d 2d 0a 74 69 74 6c 65 3a 20 46 72 6f 6e 74 20 4d 61 74 74 65 72 0a 2d 2d 2d 0a 54 68 69 73 20 69 73 20 63 6f 6e 74 65 6e 74 2e>
}

解决方案 #

问题出在ES模块导入gray-matter的方式上。gray-matter@4.x属于CommonJS模块，直接用import matter from 'gray-matter'导入时，实际拿到的是模块对象而非解析函数，导致无法识别FrontMatter分隔符。

可以通过以下两种方式修复：

方式1：改用CommonJS的require语法 #

取消注释代码中的const matter = require('gray-matter');，并删除对应的import语句：

// import matter from 'gray-matter';
const matter = require('gray-matter');

方式2：调整ES模块导入，获取default导出 #

如果坚持使用ES模块语法，需要明确获取模块的default导出：

import * as matterModule from 'gray-matter';
const matter = matterModule.default;

修改后重新执行代码，gray-matter即可正确解析FrontMatter，返回包含对应字段的data对象。

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