我已经将我的项目从Next.js 10更新到了12。在所有更改中,我的一个部分停止工作,特别是从标记文件生成页面的部分。我一直收到错误:
TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_7__.default) is not a function

我的Next.js Javascript模板是:
/** @format */
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import Head from 'next/head';
import marked from 'marked';
import { defaultLocale } from '../../i18n.json';
import useTranslation from 'next-translate/useTranslation';
import Header from '../../components/ui/Header/Header';
import Footer from '../../components/ui/Footer/Footer';
import Main from '../../components/ui/Main/Main';
const postsDirectory = path.join(process.cwd(), '__docs');
export default function Doc({ htmlString, data }) {
let { t } = useTranslation();
return (
<>
<Head>
<title>
{data.title} – {t('common:version', { version: data.version })}
</title>
<link rel='icon' href='/favicon.png' />
</Head>
<Header background='1' elevation='4' />
<Main css='padding--16 display--grid'>
<h1>{data.title}</h1>
<div
dangerouslySetInnerHTML={{ __html: htmlString }}
className='color--gray line-height--24'
/>
<hr />
<p className='color--gray line-height--24'>
{t('common:version', { version: data.version })}. Last update:{' '}
{data.date}
</p>
</Main>
<Footer />
</>
);
}
export const getStaticPaths = async ({ locales }) => {
let paths = [];
const docs = fs.readdirSync('__docs');
console.log(docs);
for (let slug of docs) {
for (let locale of locales) {
let fullpath = path.join(
postsDirectory,
slug,
locale === defaultLocale ? 'index.md' : `index.${locale}.md`
);
if (!fs.existsSync(fullpath)) {
continue;
}
paths.push({ params: { slug }, locale });
}
}
return {
paths,
fallback: false,
};
};
export const getStaticProps = async ({ params: { slug }, locale }) => {
// we need to find and read the file
const filename = locale === defaultLocale ? 'index.md' : `index.${locale}.md`;
const markdownWithMetadata = fs
.readFileSync(path.join(postsDirectory, slug + '/' + filename))
.toString();
// we parse the content to strip the metadata
const parsedMarkdown = matter(markdownWithMetadata);
// we parse the content to convert it to html with marked
const htmlString = marked(parsedMarkdown.content);
return {
props: {
htmlString,
data: parsedMarkdown.data,
},
};
};我当前的package.json是这样的:
{
"name": "Minide",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"gray-matter": "^4.0.3",
"marked": "^4.0.5",
"mdx": "^0.3.1",
"next": "12.0.4",
"next-translate": "^1.2.0",
"path": "^0.12.7",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-number-format": "^4.8.0",
"remark": "^14.0.2",
"remark-html": "^15.0.0"
},
"devDependencies": {
"eslint": "7",
"eslint-config-next": "^12.0.4"
}
}我已经更新了React,我也尝试在页面上导入React,但它根本不起作用。Next.js导入默认是react,但在另一个组件中,我必须强制导入,当我从模板上的' React‘使用导入react时,我从MODULE_7转到MODULE_8。
TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_8__.default) is not a function发布于 2021-12-01 18:21:36
我也有同样的问题。您错误地导入了marked。正如备注文档中所述,您应该这样做,而不是使用import { marked } from 'marked';

https://stackoverflow.com/questions/70152561
复制相似问题