NPM灰质不能与最新的nextjs和node版本一起工作

Question

我正在使用最新的nextjs版本。我必须使用灰质显示降价博客，但似乎像官方文档https://www.npmjs.com/package/gray-matter上给出的例子也不起作用。包括我的文件在这个代码

包。json依赖性

"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 Mattern---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,
}
})
}

官方示例的结果也不工作。

console.log(grayMatter('---ntitle: Front Mattern---nThis is content.'));
// is printing
{
content: '---ntitle: Front Mattern---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>
}

数据为空对象。

Answer 1

问题是我正在使用turbpack。turbpack仍处于实验模式，目前还不支持mdx。通过从我的项目中删除turbpack修复了这个问题。